当页面使用name属性加载时，模态有效，但不适用于Jquery attr

Question

The jquery code below toggles a name attribute to a button when a checkbox is clicked. When the name attribute is added, clicking the button displays a modal window.

Here's the problem: When the name attribute is being added by the jquery (I can see it's added in the Elements console), the modal window code doesn't work. However, it works perfectly when I load the page with the name attribute already in it, ie, <button type="button" name="password-modal-show"> instead of <button type="button" name="">

Is there some kind of 'DOM schedule of events' thing that I'm forgetting?

   $("#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

Your event handler is not being established because at the moment you are setting it there is no button with this name attribute. You have to used delegate events or set the click function on checkbox change. Here is the fiddle with problem fixed by using delegated event:

http://jsfiddle.net/LfkzY/

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