html(）并单击处理程序

html() and click handler

本文关键字：处理 程序 单击 html      更新时间：2023-09-26

我最初得到了这段代码，一切都很好：

<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，为什么点击处理程序不重复？

感谢

在将事件处理程序绑定到$(".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的元素是无效的。

一个id在一个页面上应该是唯一的。

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

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

但是，在不使用相同id的情况下，请使用一个类，就像我上面所说的那样。

click函数将遍历DOM，并将事件绑定到该时间点存在的所有元素。稍后将创建一个新的DOM元素，该元素不会被绑定。

要使其按您想要的方式工作，请参阅live（）函数的jQuery文档。

由此产生的变化看起来像：

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

之所以会发生这种情况，是因为无论id如何，事件都绑定在唯一的DOM对象中，当您删除初始按钮并替换为具有相同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);
});

使用jQuery的.on()而不是.click()-http://api.jquery.com/on/

相关文章：