in this code you can see that i have two div tags that every one of them have not the same onclick="" function call, the problem is when i click on one of them and then click on enother one the .scroll(function() works also from the first clicked function, this example with alert only,
<div class="first_div_class" onclick="firstFunction();">First Div</div>
<div class="second_div_class" onclick="secondFunction();">Second Div</div>
<div class="result"></div>
<script class="functions">
function firstFunction(){
var one = '<?php echo $someValueOne; ?>';
var two = '<?php echo $someValueTwo; ?>';
$.ajax({
type:'GET',
url:'getSomethingOne.php',
data: {
'SomethingOneInFirstFunction':one,
'SomethingTwoInFirstFunction':two
},
success:function(data){
$('.result').html(data);
},
});
$('.result').scroll(function(){
alert("Hello! to the first box!!");
});
}
function secondFunction(){
var one = '<?php echo $someValueOne; ?>';
var two = '<?php echo $someValueTwo; ?>';
$.ajax({
type:'GET',
url:'getSomethingTwo.php',
data: {
'SomethingOneInSecondFunction':one,
'SomethingTwoInSecondFunction':two
},
success:function(data){
$('.result').html(data);
},
});
$('.result').scroll(function(){
alert("Hello! to the second box!!");
});
}
</script>
even if you will try without the ajax call and only with on click function its will continue the first clicked function scroll call,
how can i stop this?...
You should set your listener for one-time usage. The problem is that you are setting a new scroll handler for the same HTML element on every call of your function and they are never removed.
$('.result').one('scroll', function() {...})
i was added to the start of each function
$(".result").unbind();
thank you epascarello