logo标签列表

html() 和 click handler

javascriptjquery
3

我最初得到了这段代码，一切正常：

<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，为什么单击处理程序不会重复执行？谢谢。
ID 应该是唯一的。最好为您的按钮使用相同的类。 - Zoltan Toth
2
@Zoltan：在粘贴的代码中，新按钮替换了旧按钮。 - David Hedlund
5个回答
3

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

click 函数将遍历 DOM，并将事件绑定到所有在那个时间点存在的元素上。您稍后创建了一个新的 DOM 元素，它没有被绑定。

为了使其按照您想要的方式工作，请参阅 jQuery 文档中的 live() 函数。

结果更改将如下所示：

$('#sub').live('click', function(event) {
    //your implementation
});
1
这是因为事件绑定在唯一的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);
});
1

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

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

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

但是不要使用相同的id，而是像我上面那样使用类。

在jQuery 1.7中，live方法显然已经被弃用。 - Daniel
啊，是的，我忘了！使用.delegate吧！ - Ian Devlin
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接