current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a dialog ($('.dialog').show()), that writes a form ($.post('/form/xyz', null, function (data) { $('.dialog').html( data );} )). That form has an script (javascript/jquery) like this:

<script type="text/javascript" src="myform/script.js">
<form>
   <input type="text" value="click me!" id="clickme" />
</form>

The script has the following code:

$(document).ready( function () {
$(document).on('click','#clickme', function () { alert('you clicked me'); } );
});

The problem is: each time the dialog is showed I need to re-execute the script but when I click #clickme I get the alert showed the times that the script was executed.

I never noted this problem (I don't know why) but now that is happening. I'm working with jQuery 1.9.2, and I'm thinking to use the function (preventPropagation), but I think this isn't reliable because I should need to do this at each 'on' event. In addition, I believed that doing an 'script loading history' will solve the problem to control that, but I have the problem that when I need to execute functions when the form is loaded I will cannot re-execute automatically as well as I'm doing now.

What's the solution?

Full example:

HTML

<html>
<head>
<script type="text/javascript">
$(document).ready( function () {
$('#open-dialog').on('click', function () {
  $.post( '/server-form.php', null, function (data) {
     $('.dialog').html( data );
  });
 });
});
</script>
</head>
<body>
<div class="dialog">
</div>
<input type="button" value="Open dialog" id="open-dialog"/>
</body>
</html>

PHP (server-form.php)

<script type="text/javascript" src="dynamic-script/30a2f63d6276a21db19782b2d8c93363.js">
    <form>
       <input type="text" value="click me!" id="clickme" />
    </form>

*DYNAMIC-SCRIPT dynamic-script/30a2f63d6276a21db19782b2d8c93363.js *

$(document).ready( function () {
$(document).on('click','#clickme', function () { alert('you clicked me'); } );
});

That's all!!!

share|improve this question
2  
Would be easier for answerers if you provided a complete html/javascript snippet instead of pieces. –  maythesource.com Jul 13 '13 at 10:01
    
I don't get it, is click handler declared inside "myform/script.js" or what? –  A. Wolff Jul 13 '13 at 10:05
    
yes it is, and the script is executed each time the dialog is showed, look at the full example. You will understand why –  Cristian David Jimenez Duarte Jul 13 '13 at 10:22

1 Answer 1

up vote 0 down vote

You should try this:

$(document).ready(){
   $("#clickme").click(function(){
       alert("you've clicked me!");
   })
}
share|improve this answer
    
with click works, but I need to work with on ... –  Cristian David Jimenez Duarte Jul 13 '13 at 10:20
    
how about: $("#clickme").on(...) ? –  Rikky Jul 13 '13 at 10:23
    
Hey!! it works!! .. but now I don't understand why??? what's the difference $(document).on('clickme') and $(clickme).on ?? –  Cristian David Jimenez Duarte Jul 13 '13 at 10:34
    
$(document).on (..) mean you bind the event handler to the document object, so everything you click will do the alert script :D. $("#click").on mean you bind the event handler to the #click only. Pretty simple right? :D –  Rikky Jul 13 '13 at 10:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.