jQuery on() 单击触发两次，试图缩小焦点会导致不正确的操作

Question

希望我能正确地解释这一点。

我有一个装满项目的 HTML 表格。每个项目都是一个可单击的链接，用于启动模式来编辑该项目。我的代码当前会导致操作触发两次，但第二次不包含完整的参数。试图缩小焦点以防止"冒泡"（如果我理解正确的话）会导致它触发一次，但参数也不完整。

.HTML：

<div id="content" class="span12">
<table class='table table-condensed table-bordered'>
    <tbody>
        <tr>
            <td class="span4">
                <a href="#" id="listingEditModal00000011643" listing_id="00000011643" user_sub="false">Example 1</a>
            </td>
            <td class="center"></td>
            <td>
                Oct 18th 2013 - 8:00 pm
            </td>
            <td>
                Example 1
            </td>
            <td>
                Example 1
            </td>
            <td>
                3.50
            </td>
            <td>
                Delete
            </td>
        </tr>
        <tr>
            <td class="span4">
                <a href="#" id="listingEditModal00000011784" listing_id="00000011784" user_sub="false">Example 2</a>
            </td>
            <td class="center"></td>
            <td>
                Oct 5th 2013 - 6:00 pm
            </td>
            <td>
                Example 2
            </td>
            <td>
                Example 2
            </td>
            <td></td>
            <td>
                Delete
            </td>
        </tr>
        ...
    </tbody>
</table>

j查询：

$('#content').on('click', "[id^=listingEditModal]", function () {
    var id = $(this).attr('listing_id');
    var user_sub = $(this).attr('user_sub');
    var val = '/AdminListings/edit/' + id + '?user_sub=' + user_sub;
    $('#addItemBody').load(val);
    $('#addItemModal').modal({});
});

以上根据萤火虫开火两次：

GET http://example.com/AdminListings/edit/00000011643?user_sub=false 200 OK 366ms
GET http://example.com/AdminListings/edit/00000011643 200 OK 342ms

第二个用于模态（即不传递user_sub参数）

如果我这样修改 jQuery：

$('#content').on('click', "[id^=listingEditModal] > td", function () {
    var id = $(this).attr('listing_id');
    var user_sub = $(this).attr('user_sub');
    var val = '/AdminListings/edit/' + id + '?user_sub=' + user_sub;
    $('#addItemBody').load(val);
    $('#addItemModal').modal({});
});

它只触发一次，并且不包含 user_sub 参数。

GET http://example.com/AdminListings/edit/00000011643 200 OK 502ms

我在这里做错了什么？

Answer 1

如果必须，请使用stopImmediatePropagation：

$('#content').on('click', "[id^=listingEditModal]", function (e) {
  e.stopImmediatePropagation(); // this will prevent further bubbling
  e.preventDefault(); // since it's a link, you should stop it from firing
  var id = $(this).attr('listing_id');
  var user_sub = $(this).attr('user_sub');
  var val = '/AdminListings/edit/' + id + '?user_sub=' + user_sub;
  $('#addItemBody').load(val);
  $('#addItemModal').modal({});
});

但这似乎不是问题所在。 还有另一个类似的事件正在触发$('#addItemBody').load(val); .您是否仔细检查了是否没有其他点击，例如'click', 'td'？

Answer 2

不是 100% 确定，但请尝试更改

$('#content').on('click', "[id^=listingEditModal]", function () {

自

$('#listingEditModal').on('click', function () {

另外要注意的是，您的id="listEditModal"中没有td。

"[id^=listingEditModal]> td"