如何在該行的任何位置點擊時觸發點擊該「鏈接」？

Question

我有一個動態創建的表，行類爲「rowclass」和id，如1,2,3,4等。該行內有一個鏈接。 我想觸發該鏈接，例如在該行的任何地方點擊該鏈接，即a。這是HTML。

<tr id="40" data-id="40" data-parent="" class="rowclass act-tr-collapsed act-tr-level-0" data-level="0"> 
<td id="235" style="font-weight:bold;font-size:17px;width:40%;"> 
    <a href="javascript:void(0)" class="act-more act-collapsed"><span class="i">+ </span></a>Nametobeappended<span id="s40" class="icon icon-info" 
    </span> 
</td> 
<td id="236"> 
<div style="height: 20px;position: relative;"> 
<div id="d236" style="height: 20px;float:left;color: #ffffff; font-weight: bold;font-family: Arial Black; width:50%;background-color: #d00000;"> 
    <div style="padding-left:5px;z-index: 99;position: absolute;">50</div> 
    <div style="float:right; height: 20px; background-color: rgb(102,197,232);width:0%;position: absolute; top:0; left:50%;"></div> 
    </div> 
    </div> 
    </td> 
    <td id="237"> 
    <div style="height: 20px;position: relative;"> 
    <div id="d237" style="height: 20px;float:left;color: #ffffff; font-weight: bold;font-family: Arial Black; width:50%;background-color: #d00000;"> 
    <div style="padding-left:5px;z-index: 99;position: absolute;">50</div> 
    <div style="float:right; height: 20px; background-color: rgb(102,197,232);width:0%;position: absolute; top:0; left:50%;"></div> 
    </div> 
    </div> 
</td> 
<td id="238"> 
<div style="height: 20px;position: relative;"> 
    <div id="d238" style="height: 20px;float:left;color: #ffffff; font-weight: bold;font-family: Arial Black; width:50%;background-color: #d00000;"> 
    <div style="padding-left:5px;z-index: 99;position: absolute;">50</div> 
    <div style="float:right; height: 20px; background-color: rgb(102,197,232);width:0%;position: absolute; top:0; left:50%;"></div> 
    </div> 
</div> 
</td> 
</tr> 

這是我寫的JQuery不起作用。

$('.rowclass').on("click", function(){ 

    idss = $(this).children().attr('id'); //td id 
    $("#"+idss).find('a').trigger('click'); //want to click <a> of that particular row 
}); 
console.log("id: "+idss)// says idss undefined 
$("#"+idss).find('a').click(); //doesn't work 

Answer 1

來觸發特定行的定位標記的onclick該行的，這是什麼工作：

$(document).on('click', '.rowclass', function() { 
    $(this).children().find('a span').trigger('click'); 
    //go to td then find <a> <span> to trigger click 

}）;

這可能不是最好的解決方案。我是新來的編程，所以如果有更好的方法，我會很高興知道它。乾杯!

Answer 2

如果你創建動態的行，你需要選擇他們這樣說：

的jsfiddle例如：https://jsfiddle.net/Hulothe/1u8scath/1/

$(document).ready(function() { 
    $(document).on('click', 'tr.rowclass', function() { 
     alert('o'); 
     $(this).children().find('a').trigger('click'); //want to click <a> of that particular row 
    }); 

    // And you need to handle a click event on the `<a>` if you want to trigger a click on it, like this: 

    $(document).on('click', 'a', function(e) { 
     e.stopPropagation(); 
     alert('Clicked'); 
    }); 
}); 

Answer 3

要做到這一點使用：

$(document).on('click', '.rowclass', function(e) { 
    // e.target is the element you clicked on 
    // .closest('tr') finds the closest parent that is an 'tr' element 
    // .find('a') finds the child that is an 'a' element 
    // .trigger('click') triggers a click on the found element 

    $(e.target).closest('tr').find('a').trigger('click'); 
}); 

我認爲問題在於事件綁定到元素後加載表。 $（document）.on（'click'，'element'，function）;確保事件總是被綁定，甚至在加載html之前。

或者使用.children返回多個元素，所以不能提供一個id。

Answer 4

Try this: 



$(document).on('click', '.rowclass', function() { 
     $(this).find('a').trigger('click'); 
}); 

LE：

jQuery(document).ready(function(){ 
    jQuery(document).on('click', '.rowclass', function(e) { 
     var link = $(this).find("a"); 
     if (e.target === link[0]) return false; 
     link.trigger('click'); 
     return false; 
    }); 
}) 

如果（e.target ===鏈接[0]） - 在這裏，我們檢查，如果點擊的元素是一個標籤本身。如果是這樣，我們會讓默認行爲發生。 如果沒有，我們觸發標籤點擊