我有一个动态创建的表,行类为" rowclass"和1,2,3,4等ids。该行内有一个链接。
我想在点击该行中的任何位置时触发该链接,即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
答案 0 :(得分: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');
});
});
答案 1 :(得分:1)
git checkout master
git merge dev
git add '{your updated files}'
git commit
git push
LE:
Try this:
$(document).on('click', '.rowclass', function() {
$(this).find('a').trigger('click');
});
if(e.target === link [0]) - 这里我们检查点击的元素是否是标签本身。如果是这样,我们将让默认行为发生。 如果没有,我们会触发标签上的点击
答案 2 :(得分:0)
要做到这一点,请使用:
$(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。
答案 3 :(得分:0)
要触发该行的特定行的锚标记,这就是有用的:
$(document).on('click', '.rowclass', function() {
$(this).children().find('a span').trigger('click');
//go to td then find <a> <span> to trigger click
});
这可能不是最好的解决方案。我是编码的新手,所以如果有更好的方法,我会很高兴知道它。干杯!