我有如下的html表:
<table id='messagelist'>
<tr id="rcmrowMTM" class="message selected" aria-selected="true">
<td class="threads"><span class="threads"></span></td>
<td class="subject" tabindex="0"><span class="fromto skip-on-drag"><span class="adr"><span title="test@example.com" class="rcmContactAddress">test@example.com</span></span>
</span><span class="date skip-on-drag">Today 08:27</span><span class="subject"><span id="msgicnrcmrowMTM" class="msgicon status" title=""></span><a href="./?_task=mail&_mbox=INBOX&_uid=13&_action=show" onclick="return rcube_event.keyboard_only(event)"
onmouseover="rcube_webmail.long_subject_title(this,1)" tabindex="-1"><span>test</span></a></span>
</td>
<td class="flags"><span class="flag"><span id="flagicnrcmrowMTM" class="unflagged" title="Not Flagged"></span></span><span class="attachment"><span class="attachment" title="With attachment"></span></span>
</td>
</tr>
<tr id="rcmrowNw" class="message">
<td class="threads"><span class="threads"></span></td>
<td class="subject"><span class="fromto skip-on-drag"><span class="adr"><span title="test@example.com" class="rcmContactAddress">test@example.com</span></span>
</span><span class="date skip-on-drag">Sun 12:22</span><span class="subject"><span id="msgicnrcmrowNw" class="msgicon status" title=""></span><a href="./?_task=mail&_mbox=INBOX&_uid=7&_action=show" onclick="return rcube_event.keyboard_only(event)"
onmouseover="rcube_webmail.long_subject_title(this,1)" tabindex="-1"><span>test</span></a></span>
</td>
<td class="flags"><span class="flag"><span id="flagicnrcmrowNw" class="unflagged" title="Not Flagged"></span></span><span class="attachment"> </span></td>
</tr>
</table>
每次用户点击一行新课程&#34;选择&#34;已添加到tr
中。
我想要的是,如果用户点击第一行的最后title="With attachment"
行和行td
,则显示警告
这是我尝试过的代码,但它无效。
$('#messagelist tr.selected').on('click', function() {
if ($(this).find("span[title|='With attachment']")) {
alert('with attachment');
}
});
任何帮助表示赞赏。提前谢谢。
答案 0 :(得分:2)
最好的方法是结合搜索&#34;与附件&#34;在添加类的相同事件处理程序中。
或者,您可以向所有行添加新的单击事件侦听器...并检查所选类是否存在
$('#messagelist').on('click', 'tr', function() {
var $row = $(this);
// slight delay while class is added
setTimeout(function(){
if($row.hasClass('selected') && $row.find("span[title|='With attachment']").length){
alert('with attachment');
}
},50);
});
答案 1 :(得分:1)
你在代码中犯了错误
您的代码
$('#messagelist tr.selected').on('click', function() {
if ($(this).find("span[title|='With attachment']")) {
alert('with attachment');
}
});
更新代码
$('.messagelist tr.selected').on('click', function() {
if ($(this).find("span[title|='With attachment']")) {
alert('with attachment');
}
});
messagelist
是class
它不是id
因此您应该使用.messagelist
代替#messagelist
。
希望这会对你有所帮助。 :)
答案 2 :(得分:0)
请使用以下代码段:
$('.messagelist tr.selected').on('click', function(e) {
e.preventDefault();
var span= $(this).find('span');
var has_attachment
$(span).each(function(){
has_attachment = $(this).attr('data-title');
});
if(has_attachment=="With attachment"){
alert('with attachment');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='messagelist'>
<tr id="rcmrowMTM" class="message selected" aria-selected="true">
<td class="threads"><span class="threads"></span></td>
<td class="subject" tabindex="0"><span class="fromto skip-on-drag"><span class="adr"><span title="test@example.com" class="rcmContactAddress">test@example.com</span></span>
</span><span class="date skip-on-drag">Today 08:27</span><span class="subject"><span id="msgicnrcmrowMTM" class="msgicon status" title=""></span><a href="./?_task=mail&_mbox=INBOX&_uid=13&_action=show" ><span>test</span></a></span>
</td>
<td class="flags">
<span class="flag"><span id="flagicnrcmrowMTM" class="unflagged" title="Not Flagged"></span></span><span class="attachment">
<span class="attachment" data-title="With attachment">
</span></span>
</td>
</tr>
<tr id="rcmrowNw" class="message selected">
<td class="threads"><span class="threads"></span></td>
<td class="subject"><span class="fromto skip-on-drag"><span class="adr"><span title="test@example.com" class="rcmContactAddress">test@example.com</span></span>
</span><span class="date skip-on-drag">Sun 12:22</span><span class="subject"><span id="msgicnrcmrowNw" class="msgicon status" title=""></span><a href="./?_task=mail&_mbox=INBOX&_uid=7&_action=show"
tabindex="-1"><span>test</span></a></span>
</td>
<td class="flags"><span class="flag"><span id="flagicnrcmrowNw" class="unflagged" title="Not Flagged"></span></span><span class="attachment"> </span></td>
</tr>
</table>
我有一个改变的代码但是。在span中,我使用<span class="attachment" data-title="With attachment">
而不是title=
,因为title是保留的HTML标记和属性。data-*
属性在大多数情况下用于javascript或jQuery中的自定义数据处理。
答案 3 :(得分:-1)
检查最后一个TD,然后检查标题=&#34;附件&#34;在span标签中。
同样在你的代码中,messagelist是class而不是ID,所以你应该在代码中使用点(。)。
$('.messagelist tr.selected').on('click', function () {
if ($(this).find('td:last').find("span[title|='With attachment']")) {
alert('with attachment');
}
});