次要onClick事件不起作用

Question

I have 3 click events on the page by default (blue X, blue +, grey X). Each one opens a modal box.

Each of those modal boxes, has a button. Two of the modal boxes, the one for the blue X, and the one for the blue +, both have functioning buttons inside. The console message shows for both of these additional click events when I click their respective buttons. I click the button in the modal for the blue X or blue +, and I get the console log message. Good. But this doesn't work fo the grey X.

The other 3rd modal box does open, but the button inside doesn't work. This button has an id=

remPostConfirm

The code for this button that doesn't' work is:

showRemPost = function(id, url, lname) {
    console.log("remPost1");
    if (isAuth) {
        $('#remPostConfirm').off('click').on("click", function(e) {
            e.preventDefault();
            console.log("remPost2");
        });
        $('#remPostModal .description').html('<p>Post: ' + url + '</p><p>From List: ' + lname + '</p><div  id="remListConfirm" class="mini ui button">Remove</div >');
        $('#remPostModal').modal('show');
    } else {
        deniedAccess();
    }
}

The other two buttons that do work, have essentially the same code.

I am lost as to why this no longer works, as this 3rd modal button used to work. If you try to click on the grey X for this modal to load, then on the "Remove" button, you won't get a console log message like the other two give (the blue X and blue +).

Here is a jsfiddle example for you test and see.

https://jsfiddle.net/qrmrfrhj/16/

Sorry for the JS being included in the HTML, I can't get the example to work if I separate it down below. If you want to help me get that working before downvoting me, that would be nice. Thanks.

Thank you for any help. Peace.

Answer 1

You have two problems in showRemPost .

First, in the HTML that you add to #remPostModal , you have id="remListConfirm" , but you're adding a click handler on #remPostConfirm . remListConfirm is already used in remListModal , you shouldn't duplicate it here.

Second, you bind the click handler before you create the button with .html() . So when you create the button, it doesn't have a click handler. You need to change the order. There's no need for .off() , since a brand new element won't have a click handler. Alternatively you could use event delegation. Or you could do it like the other dialogs, where you don't overwrite the button that's in the original HTML.

  showRemPost = function(id, url, lname) {
    console.log("remPost1");
    if (isAuth) {
      $('#remPostModal .description').html('<p>Post: ' + url + '</p><p>From List: ' + lname + '</p><div  id="remPostConfirm" class="mini ui button">Remove</div >');
      $('#remPostConfirm').on("click", function(e) {
        e.preventDefault();
        console.log("remPost2");
      });

      $('#remPostModal').modal('show');
    } else {
      deniedAccess();
    }
  }

Answer 2

You have two issues:

1. The id of the "remove" button in your popup is actually remListConfirm , not remPostConfirm
2. You're creating your events BEFORE you add the button to the DOM. That means when JS looks for an element with the id 'remListConfirm', it's going to find nothing and thus not attach the event to anything.

The solution is to change the id in your JS to remListConfirm and move the .html line ABOVE the lines where you create the click events. Here's the section fixed:

                 if (isAuth) {
                        $('#remPostModal .description').html('<p>Post: ' + url + '</p><p>From List: ' + lname + '</p><div  id="remListConfirm" class="mini ui button">Remove</div >');
                    $('#remListConfirm').off('click').on("click", function(e) {
                        e.preventDefault();
                        console.log("remPost2");
                    });

                    $('#remPostModal').modal('show');
                } else {
                    deniedAccess();
                }
            }