儿童点击获取父母身份证

我的Django的模板如下：

<table id="archive-table" class="table table-hover table-vcenter"> 
    <thead> 
     <tr> 
      <th>Make and model</th> 
      <th>First registration</th> 
     </tr> 
    </thead> 
    <tbody> 
     {% for calculation in calculations %} 
      <tr data-archive-row class="archive-row" data-calculation-id={{ calculation.id }}> 
       <td>{{ calculation.first_registration }}</td> 
       <td>{{ calculation.body }}</td> 
      </tr> 
     {% endfor %} 
    </tbody> 
</table>

而我的JS如下：

<script> 
    $(document).ready(function() { 
     $('#archive-table').on('click', '[data-archive-row]', function (e) { 
      var calculation_id = e.target.dataset['calculationId']; 
      alert(calculation_id) 
     }) 
    }); 
</script>

我怎样才能不管我对孩子点击父的dataset['calculationId']。

随着我的代码我得到undefined在alert。但是，如果我例如将data-calculation-id={{ calculation.id }}添加到一个td，如果我然后点击它然后我得到正确的ID。

有没有办法从父母那里得到这个id，不管它是否被点击在孩子或父母身上？

来源

2017-02-09 Boky

使用e.currentTarget，不target：

$(document).ready(function() { 
    $('#archive-table').on('click', '[data-archive-row]', function(e) { 
    var calculation_id = e.currentTarget.dataset.calculationId; 
    alert(calculation_id) 
    }) 
});

既然你委托的事件，e.currentTarget将TR元素，目标将是不管你这个TR内点击，也许TD还是有东西在里面。

另一种简单的解决方案是简单地使用this，因为它会指向事件处理始终保留时间：

var calculation_id = this.dataset.calculationId;

来源

2017-02-09 16:10:51 dfsq

由于您使用jQuery你可以使用jQuery的方法.data()代替：

$('#archive-table').on('click', '[data-archive-row]', function (e) { 
    var calculation_id = $(this).data('calculation-id'); 
    alert(calculation_id) 
})

希望这会有所帮助。

$(document).ready(function() { 
 
    $('#archive-table').on('click', '[data-archive-row]', function (e) { 
 
    var calculation_id = $(this).data('calculation-id'); 
 

 
    console.log(calculation_id); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="archive-table" class="table table-hover table-vcenter"> 
 
    <thead> 
 
    <tr> 
 
     <th>Make and model</th> 
 
     <th>First registration</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr data-archive-row class="archive-row" data-calculation-id='calculation.id'> 
 
     <td>calculation.first_registration</td> 
 
     <td>calculation.body</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

来源

2017-02-09 16:11:34

这是很好的（我可能会使用'this.dataset'），但仍是要了解e.target'和'e.currentTarget'之间'区别是很重要的。 – dfsq

没错，只是我认为最好不要将纯js与jQuery混合在一起，只要我们可以用其中的一个来实现这个诀窍。 –

检查当前目标数据计算-ID，如果它是不确定的检查其父。

<script> 
    $(document).ready(function() { 
     $('#archive-table').on('click', '[data-archive-row]', function (e) { 
      var calculation_id = e.currentTarget.dataset['calculationId'] 
           || e.currentTarget.parentElement.dataset['calculationId']; 
      alert(calculation_id) 
     }) 
    }); 
</script>

来源

2017-02-09 16:14:32

你能解释一下这个部分的重点吗？ e.currentTarget.parentElement.dataset ['calculationId']'？因为'e.currentTarget'将总是'tr [data-archive-row]'。 – dfsq

如果当前目标没有定义，则要求使用父级的data-calculationId。 –

我认为OP正试图解决使用'e.target'的问题，这个问题的确会给TD带来不确定性，因此我们需要将步骤提升一级。但在你的解决方案中，这是没有意义的，因为currentTarget保证是TR。 – dfsq

儿童点击获取父母身份证

回答

相关问题