CODEWITHSUNDEEP
jqueryajaxfancybox
Matt Asbury
Matt Asbury

Reputation: 5662

Click event not binding to loaded content in fancybox

I have an application that uses AJAX and forms in a modal window (Fancybox) to provide an editing facility for users data.

I have the form set up in a separate file - edit.php:

<form action="services/update/7" method="post" id="update-form">
  <label>Update the name of this upload</label>
  <input type="text" name="dataname" value="Test Data" />
  <label>Select the theme of this upload</label>
  <select>
    <option value="All">All Themes</option>
    <option value="1">Example Theme 1</option>
    <option value="2">Example Theme 2</option>
    <option value="3">Example Theme 3</option>
  </select>
  <input type="submit" name="submit" value="Save Changes" />
</form>

I have a main page with a link:

<a href="services/edit/7" id="edit-data">Edit</a>

I use jQuery to bind events to the elements:

$("#edit-data").on("click", function(event))
{
  $.fancybox({
    'type': 'ajax',
    'content': $(this).attr('href')
  });
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
});

I have a final binding on the submit button within the form:

$("#update-form input[type='submit']").on("click", function(event))
{
  alert("clicked");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
});

I have added a simple alert box to the final click event for testing but it never gets fired.

Any thoughts?

Thanks

Upvotes: 0

Views: 2736

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

Looks like you have to use delegation, not sure as i don't fully understand your code:

$(document).on("click", "#update-form input[type='submit']", function(event))
{
  alert("clicked");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
});

Upvotes: 2

Adil Shaikh
Adil Shaikh

Reputation: 44740

Use Event delegation with .on()

$(document).on("click","#update-form input[type='submit']", function(event)){
  alert("clicked");
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
});

http://api.jquery.com/on/

Upvotes: 3

Related Questions