Question

单击复选框时，下面的jquery代码会将name属性切换为按钮。添加name属性后，单击该按钮将显示模式窗口。

这就是问题：当jquery添加name属性时（我可以看到它在Elements控制台中添加），模态窗口代码不起作用。但是，当我加载已包含name属性的页面时，它可以正常工作，即<button type="button" name="password-modal-show"> instead of <button type="button" name="">

我忘记了某种“事件的DOM计划”吗？

   $("#tos-sub").change(function() {

            if(this.checked) {

                $('#password-modal-show').attr('name', 'password-modal-show');

            }
            else {
                $('#password-modal-show').attr('name', '');
            }

        });

        $('button[name=password-modal-show]').click(function() {

            $('#password-modal').modal('show');

        });

<input type="checkbox" value="tos-sub" name="tos-sub" id="tos-sub" class="form-left required"/>
<label>
    <span style="font-size: 80%; margin-right: .5em;">I agree to WifiTap&#39;s <a>Terms of Service</a></span>
</label>
<div style="margin-left: 15px;">
    <button type="button" name="" id="password-modal-show" class="btn big-button" role="button">Get wifi!</button>

Answer 1

您的事件处理程序尚未建立，因为在您设置它时，没有具有此name属性的按钮。您必须使用委托事件或在复选框更改时设置单击功能。以下是使用委托事件修复问题的小提琴：

http://jsfiddle.net/LfkzY/

$(document).click(function(e) {
        if(e.target.getAttribute('name')=='password-modal-show') alert('modal');
});

当页面加载了name属性但不能与Jquery attr一起使用时，Modal可以正常工作

1 个答案: