0

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

我有一个充满项目的 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>

jQuery：

$('#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

我在这里做错了什么？

4

2 回答 2

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'，例如？

于 2013-10-11T22:46:07.717 回答
0

不是 100% 肯定，但尝试改变

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

至

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

另请注意，您的 id="listEditModal" 中没有 td

“[id^=listingEditModal] > td”

于 2013-10-11T22:41:49.820 回答