Javascript html（）并单击处理程序

我最初得到了这段代码，所有代码都运行良好：

<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>

雷吉斯托
$（文档）.ready（函数（）{
$（“.rm>#sub”）。单击（函数（事件）{
event.preventDefault（）；
var formdata=$（“#自定义”）.serialize（）；
$.ajax({
url:“dojo/insert.php”，
类型：“post”，
数据类型：“json”，
数据：formdata，
成功：功能（数据）{
交换机（data.livre）{
案例“错误”：
$（“.rm”）.html（'Rever'）；
打破
违约：
$（'#paginas'）.delay（50）.load（'profile_empresa_3.php'）；
打破
}
}
});
返回false；
});
});

现在问题来了。当我添加带有相同id的按钮的

$（“.rm”）.html（”

）时。如果我单击此新按钮，页面将重新加载。我的问题是。如果添加的按钮具有相同的id，为什么不重复单击处理程序

---

谢谢

使用jQuery的

.on（）

而不是

。单击（）

-

页面上的id应该是唯一的

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

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

---

但是，如果不使用相同的id，请使用上面提到的类。

单击

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

要按照您想要的方式完成此操作，请参阅函数的jQuery文档

由此产生的变化如下所示：

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

将事件处理程序绑定到
$（“.rm>#sub”）
时，新元素还不存在，因此jQuery无法将处理程序绑定到它

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

但与其替换整个元素，您似乎可以只更改其文本内容：

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


还请注意，ID应该是唯一的，在DOM中有两个元素具有相同的ID是无效的。
发生这种情况是因为事件绑定在唯一的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);
});

var btnEvent=函数（e）{
e、 预防默认值（）；
var formdata=$（“#自定义”）.serialize（）；
$.ajax({
url:“dojo/insert.php”，
类型：“post”，
数据类型：“json”，
数据：formdata，
成功：功能（数据）{
交换机（data.livre）{
案例“错误”：{
$（“.rm”）.html（'Rever'）；
}中断；
违约：
$（'#paginas'）.delay（50）.load（'profile_empresa_3.php'）；
打破
}
}
});
返回false；
};
$（文档）.ready（函数（）{
$（“.rm>#sub”）。单击（b从不）；
});
ID
-s应该是唯一的。最好为您的应用程序使用相同的
类buttons@Zoltan：在粘贴的代码中，新按钮替换了旧按钮。在jquery 1.7中，live方法显然不受欢迎。啊，是的，我忘了。那就代表吧！
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);
});