Question

我有一个jquery函数，仅在单击表行时激活，如果是，则调用控制器方法。但是，此行还包含复选框，如果我单击它，我不希望调用此方法。我尝试检查点击的元素类型或其他参数，如类，但它似乎只适用于整行。任何想法如何使它工作？

JQuery的：

DROP TABLE IF EXISTS my_table;

CREATE TABLE my_table 
(id INT NOT NULL AUTO_INCREMENT PRIMARY KEY
,memberid INT NOT NULL
,memberMeta VARCHAR(20) NOT NULL
,memberMetaValue VARCHAR(20) NOT NULL
,UNIQUE(memberid,membermeta)
);

INSERT INTO my_table VALUES
(654, 15,'ulke','Türkiye'),
(653, 15,'eposta','mail@mymail.com'),
(652, 15,'alternatiftel','0000000000'),
(651, 15,'telno','0000000001'),
(650, 15,'kilo','90'),
(649, 15,'boy','175'),
(648, 15,'adsoyad','TestTest'),
(647, 15,'tckimlik','12345678901'),
(655, 15,'yas','23'),
(656, 15,'gozrengi','Elaa');

SELECT memberid 
  FROM my_table
 WHERE (memberMeta = 'kilo' AND memberMetaValue >= 90)
    OR (memberMeta = 'boy' AND memberMetaValue <= 175)
 GROUP 
    BY memberid 
HAVING COUNT(*) = 2;

+----------+
| memberid |
+----------+
|       15 |
+----------+

}

CSHTML：

function AllowTableRowsToBeClicked() {
    $('#pref-table tbody tr').click(function () {
        var resourceName = $(this).attr('title');
        var categoryName = $('#pref-table').attr('name');
        var url = "/Home/GetSpecific";
        $.post(url, { categoryName: categoryName, resourceName: myClass }, function (data) {

    });
});

Answer 1

尝试event.stopPropagation()：

$('#pref-table input[type="checkbox"]').click(function(e) {
    e.stopPropagation();
});

Answer 2

如果您的复选框有一些ID box，那么您可以检查该事件是否来自该复选框并停止处理。

$('#pref-table').on('click',function (event) {

        if(event.target.id === 'box'){
           return;
        }

        var resourceName = $(this).attr('title');
        var categoryName = $('#pref-table').attr('name');
        var url = "/Home/GetSpecific";
        $.post(url, { categoryName: categoryName, resourceName: myClass }, function (data) {

    });

这里有Pen来证明这个想法。

Answer 3

在下面的示例中使用eventPropagation：

<强> HTML

<table width="100%">
  <tr style="background:yellow">
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</table>

<强>的javascript / jquery的

$(document).ready(function() {
  $('table tr').click(function(e) {
    alert("row clicked");
  });

  $('input[type=checkbox]').click(function(e) {
    e.stopPropagation();
    alert("checkbox clicked")
  });
});

Jsfiddle demo

Answer 4

我认为您的问题是，当用户点击复选框时，您不想激活您的事件代码，无论复选框状态如何。

q()

Jquery - 检查是否单击了复选框

4 个答案: