CODEWITHSUNDEEP
javascriptjqueryjquery-steps
Unbreakable
Unbreakable

Reputation: 8084

JQuery button click does 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?

Upvotes: 3

Views: 11089

Answers (4)

tyler_mitchell
tyler_mitchell

Reputation: 1747

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;
}

Upvotes: 1

Badiparmagi
Badiparmagi

Reputation: 1285

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")
    });

Upvotes: 1

hallleron
hallleron

Reputation: 1992

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.

Upvotes: 17

CumminUp07
CumminUp07

Reputation: 1978

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/

Upvotes: 4

Related Questions