单击具有特定属性的行时的jQuery警报

时间:2017-07-06 12:01:42

标签: jquery html

我有如下的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&amp;_mbox=INBOX&amp;_uid=13&amp;_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&amp;_mbox=INBOX&amp;_uid=7&amp;_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">&nbsp;</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');
  }
});

任何帮助表示赞赏。提前谢谢。

JSFiddle

4 个答案:

答案 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');
  }
});

messagelistclass它不是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&amp;_mbox=INBOX&amp;_uid=13&amp;_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&amp;_mbox=INBOX&amp;_uid=7&amp;_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">&nbsp;</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');
    }
});