How do I stop the Click event when a Javascript function is executed?
I am trying to assign an onclick event to an anchor tag that already exists when I click on another element. However, everything I've tried seems to result in the event being fired immediately upon assignment. We use Prototype and Scriptaculous.
This is the function:
<script type="text/javascript">
function loadData(step, dao_id) {
var div_id = 'div_' + step;
var anchor_id = 'step_anchor_' + step;
var prv = step -1;
switch(step) {
case 1:
var action = 'major_list';
break;
case 2:
var action = 'alumni_list';
break;
case 3:
var action = 'alumnus_display';
break;
}
new Ajax.Request('awizard.php', {
method: 'get',
parameters: {action : action, dao_id : dao_id},
onSuccess: function(data) {
$(div_id).innerHTML = data.responseText;
//$(anchor_id).observe('click', loadData(prv, dao_id, true));
//Event.observe(anchor_id, 'click', alert('I executed'));
showStep(step);
//$(anchor_id).onclick = loadData(prv, dao_id, true);
//$(anchor_id).observe('click', loadData(prv, dao_id, true));
}
}
)
}
function showStep(step, toggleBack) {
var div_id = 'div_' + step;
if(!toggleBack) {
if(step != 1) {
var prv = step -1;
Effect.SlideUp('div_' + prv, { duration:1, delay:0 });
}
Effect.SlideDown(div_id, { duration:1, delay:1 });
Effect.Appear('step_anchor_' + step, { duration:1, delay:2 });
} else {
var prv = step -1;
Effect.SlideDown('div_' + prv, { duration:1, delay:0 });
Effect.SlideUp(div_id, { duration:1, delay:1 });
Effect.Fade('step_anchor_' + step, { duration:1, delay:2 });
}
}
</script>
As you can tell, I have tried several ways to assign an onclick event to an anchor tag and none of them work as expected. At first I assumed that the Effect.Appear function on the anchor tag might fire the onclick event, so I tried to move the event assignment after the showStep function, but that made no difference. Also, I tried to call the stop () function right after the assignment, but that didn't make any difference either.
I agree with that. Is there a way to assign an onclick event to an anchor tag without automatically firing the event? What am I doing wrong?
source to share
Functions are first class objects in Javascript, which means you can assign them to variables or pass them as arguments to other functions. In your code, you are confusing function calls with function references.
Take a look at this code:
$(anchor_id).observe('click', loadData(prv, dao_id, true));
That it passes the result of calling the loadData function to the watch function. What you want to do is pass a reference to the function call. You can easily fix this by changing the code:
$(anchor_id).observe('click', function() { loadData(prv, dao_id, true) } );
source to share