兒童點擊獲取父母身份證

我的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

兒童點擊獲取父母身份證

回答

相關問題