I have a JQuery FIddle properly running. It uses a JQUERY Steps PlugIn . Now if you run JQuery FIddle in the last step you will find three button "Save", "Previous" and "Finish". If I click on Save button I want to show an alert saying "you have been clicked". If you scroll to the bottom of the HTML Section in the JSFiddle you will find below code.

Code working fine:

// on Save button click
    $(".actions").on("click",".saveBtn",function(){
      alert("You have been clicked!");
    });
  });

Code not working:

 $( ".saveBtn" ).click(function() {
      alert("You have been clicked");
    });

Question: Why does the second code snippet not work?

I have a JQuery FIddle properly running. It uses a JQUERY Steps PlugIn . Now if you run JQuery FIddle in the last step you will find three button "Save", "Previous" and "Finish". If I click on Save button I want to show an alert saying "you have been clicked". If you scroll to the bottom of the HTML Section in the JSFiddle you will find below code.

Code working fine:

// on Save button click
    $(".actions").on("click",".saveBtn",function(){
      alert("You have been clicked!");
    });
  });

Code not working:

 $( ".saveBtn" ).click(function() {
      alert("You have been clicked");
    });

Question: Why does the second code snippet not work?

• javascript
• jquery
• jquery-steps

• What jQuery lib do you use? – Drag13 Commented Jul 24, 2017 at 14:32
• I can't reproduce your problem, when I click the save button it alerts "Saving!" – CumminUp07 Commented Jul 24, 2017 at 14:32
• @CumminUp07: It's coming from the script that's working fine. I want to replace it with the second code snippet. Kindly replace it with second code snippet and then it will not show any alert. – Unbreakable Commented Jul 24, 2017 at 14:34
• 1 stackoverflow.com/a/6658774/2996989 this will explain you what you want – Ahmed Sunny Commented Jul 24, 2017 at 14:53
• 1 @AhmedSunny: thank you so much! – Unbreakable Commented Jul 24, 2017 at 14:54

4 Answers 4

A short story about events:

Since your button with class .saveBtn is created dynamically it doesn't get initialized at document load. But in order to bind events to elements they normally need to be initialized on startup. Your button however gets created when all events are bound to elements already. So you need to do something called event delegation. This means that you listen to a specific event in the entire document for example. When the event fires you look up which element fired the event. This way even dynamically created elements can be selected. A common method for this is the following:

$(document).on('click', '.saveBtn', function(){
  alert("Dynamic button clicked. Hurray!");
});

This way you are telling the entire document to register click events and compare the source of the event with your selector, in this case .saveBtn.

It is not working because you are dynamically creating the button, move the function to after this line $(document).find(".actions ul").prepend(saveBtn) and it will work.

$(document).find(".actions ul").prepend(saveBtn)
$(".saveBtn").click(function() {
    alert("You have been clicked");
});

here is an update of your fiddle working https://jsfiddle.net/mjyq4oda/5/

beause your save button is dynamic. it is created after some click events. try on function instead of click

  $(document).on("click", ".saveBtn", function() {
        alert("You have been clicked")
    });

You are adding the button dynamically on step change, your event listener is is initialised when there are no buttons with class saveBtn.

$( ".saveBtn" ) returns nothing.

Instead of removing it and appending it on step change, just hide and show. This would be better.

See working fiddle

This uses the init of jQuery steps to add the button once (not every step change).

onInit: function (event, currentIndex) { 
    var saveA = $("<a>").attr("href","#").addClass("saveBtn").text("Save");
    var saveBtn = $("<li>").attr("aria-disabled",false).append(saveA);
    $(document).find(".actions ul").prepend(saveBtn);
    $(".actions").find(".saveBtn").hide();
}

Then on step change we just show/hide:

onStepChanged:function (event, currentIndex, newIndex) {
    if(currentIndex == 2)
        $(".actions").find(".saveBtn").show();
    else
      $(".actions").find(".saveBtn").hide();

    return true;
}