Question

继续前面的问题How to set the HTML of the first <li> element in the parent ul我在使用JQuery在DOM中更改了元素后，让JQuery在元素上执行函数时遇到了麻烦。

所以这是HTML：

<ol>
<li>
    <ul class="product-controls">
    <li>101</li>
    <li><a name="PushUp">Push Up</a></li>
    <li><a>Push Down</a></li>
    </ul>
</li>
<!--- Underneath is what the HTML looks like when an Push Up has been made --->
<li>
    <ul class="product-controls">
    <li>5</li>
    <li><a name="PushRemove">Remove Push</a></li>
    <li><a>Push Down</a></li>
    </ul>
</li>
</li>
</ol>

当用户点击Push Up或Push Down时，我会对服务器进行AJAX更新，并返回一个数字。 服务器知道要更新的产品（我排除了此代码，因为此示例不需要）

一旦采取了行动，我就更换了按钮的HTML，以便用户可以移除推送。像这样：

$('a[name="PushUp"]').on('click', function(event) {
   var $this = $(this);
   var ProductID = // assume this is done;
   $.ajax({
   ....
        success: function(result) {
             $this.closest("li").html('<a name="PushNone" id="Product'+ProductID+'">Retract Push</a>');
            }
            });
                event.preventDefault();
    });

我的下一部分代码将不会使用名称为PushNone的锚点在JQuery上面添加它之后。

$('a[name="PushNone"]').on('click', function(event) {
....
// similar Ajax calls as above but it just removes the Push vote from the database
});

然而，如果在JQuery DOM操作之前页面上已存在它，那么上面的代码确实会接收到PushNone锚链接。因此，如果页面在第一次呈现时已经有一个PushNone链接，那么JQuery就可以了。在PushUp代码运行后，它似乎没有看到它。

这是某种传播问题还是其他什么？

Answer 1

你应该delegate事件，例如：

$(document).on('click', 'a[name="PushNone"]', function(event) {
   //....    
});

在更改DOM之后，似乎无法切换操作

1 个答案: