Question

我最初得到了这段代码，一切运作良好：

<div class="rm">
        <button id="sub" type="submit">
            <span>Registo</span>
        </button>
    </div>

   <script type="text/javascript">
    $(document).ready(function() {
        $(".rm>#sub").click(function(event) {
            event.preventDefault();
            var formdata = $("#custom").serialize();
            $.ajax({
                url: "dojo/insert.php",
                type: "post",
                dataType: "json",
                data: formdata,
                success: function(data) {
                    switch (data.livre) {

                    case 'error':
                        $(".rm").html('<button id="sub"  type="submit"><span>Rever</span></button>');
                        break;                    

                    default:
                        $('#paginas').delay(50).load('profile_empresa_3.php');          
                        break;
                    }
                }
            });
            return false;              
        });
    });
    </script>

现在的问题。当我使用具有相同ID的按钮添加$(".rm").html("")时。如果我单击此新按钮，则会重新加载页面。我的问题是。如果添加的按钮具有相同的ID，为什么不重复单击处理程序？

感谢

Answer 1

当您将事件处理程序绑定到$(".rm > #sub")时，新元素尚不存在，因此jQuery无法将处理程序绑定到它。

您可以重新绑定事件处理程序，或将其绑定到$('.rm')并使用事件委派（使用.on()）：

$('.rm').on('click', '#sub', function() { // or use button instead of #sub
   //...
});

但不是替换整个元素，似乎你可以改变它的文本内容：

$('#sub span').text('Rever');
// or
$('.rm button span').text('Rever');

另请注意，ID应该是唯一的，DOM中具有相同ID的两个元素无效。

Answer 2

ID在页面中应该是唯一的。

要为所有新动态创建的按钮添加相同的操作，您需要执行以下操作：

 $(".rm > .sub").live("click",function(event) {
....

但是如果没有使用相同的id，请使用上面的类。

Answer 3

click函数将遍历DOM，并将事件绑定到该时间点存在的所有元素。您之后正在创建一个新的DOM元素，它不受约束。

要按照您希望的方式进行此操作，请参阅live()函数的jQuery文档。

结果变化如下：

$('#sub').live('click', function(event) {
    //your implementation
});

Answer 4

发生这种情况是因为事件绑定在唯一的DOM对象中，而不是id，当你删除初始按钮并替换为具有相同id的那个时，绑定到按钮的事件就消失了。

您可以做的是在变量中声明事件函数，当您重新创建按钮时，再次将事件分配给它。

您的代码将是：

var btnEvent =  function(e) {
    e.preventDefault();
    var formdata = $("#custom").serialize();
    $.ajax({
        url: "dojo/insert.php",
        type: "post",
        dataType: "json",
        data: formdata,
        success: function(data) {
            switch (data.livre) {

            case 'error': {
                $(".rm").html('<button id="sub" type="submit" onclick="return btnEvent(event)"><span>Rever</span></button>');

            } break;                    

            default:
                $('#paginas').delay(50).load('profile_empresa_3.php');          
                break;
            }
        }
    });
return false;              
};
$(document).ready(function() {
    $(".rm>#sub").click(btnEvent);
});

Answer 5

使用jQuery的.on()代替.click() - http://api.jquery.com/on/

html（）并单击处理程序

5 个答案: