js按钮单击未检测到

Question

I have created a div that when clicked, a messi box pop up, with button "Yes" and "NO".:

 var Abutton = document.createElement("div");
                Abutton.className = "Abutton";
                Abutton.onclick = function () {
                    new Messi(
                        'Are you sure you want to close your job?',
                        {
                            title: 'Are you sure?',
                            buttons: [
                                {id: 0, label: 'Yes', val:'Y' , class: 'deleteJob'},
                                {id: 1, label: 'No', val: 'N', class: 'cancelAction'}

                            ]
                        }
                    );
                };
                Abutton.title = "Closed?";
                Abutton.appendChild(document.createTextNode("Close Job"));
                li.appendChild(Abutton);

The "yes " button is tied to this function below . But when I click, nothing happens. The log statement is also not shown.

  $(".deleteJob").click(function(){
           deleteJob();
           console.log("heelo");
    });

Why is it not working?

Answer 1

Not sure based on just this code but the deleteJob button is being added dynamically and probably doesn't exist at the time you are adding the click event. You should probably use event delegation on the parent element instead. Based on your code this is the li element. If it is part of a <ul> maybe put the click event on it like so:

$(function(){
  $('ul').on('click','.deleteJob', function(){
    deleteJob();
    console.log('hello');
  });
});

Again, not 100% sure without seeing the rest of the code. But either way, Event Delegation is the way to go.