When I clicked on calss ‘two’ I can prevent class ‘one’ evnet shoulb not be trigger, how about vice versa mean if click on class ‘one’ class ‘two’ event should not be trigger.
Here both are pointing to same document object.
Be fix with the code don’t change anything
<div class="one">
<div class="two"></div>
</div>
$(document).on('click', 'one', function(){
alert('click1');
});
$(document).on('click', 'two', function(e){
e.stopPropogation();
alert('click2');
});
Not even the existing scripting code that is there?
@paul: Yes, within the code can we change anything to rectify my issue? Or else please let me know any better way
It is normal for JavaScript, for only the outer elements to trigger and not the inner elements.
See for example your code with some CSS to help make it easier to see what is happening.
@paul: below is my scenario
Either clicking on the classes calling zoom() fun, but I want to stop specific property while selecting class ‘.one’, which I had tried in below way with .data, but it’s not working.
<div class="one">
<div class="two"></div>
</div>
$(document).on('click', 'one', function(){
$(this).data('clicked',true);
alert('click1');
zoom();
});
$(document).on('click', 'one', function(e){
e.stopPropogation();
alert('click2');
zoom();
});
function zoom(){
//some properties will goes here
if($('.one').data('clicked'){
$('.abc').css('border-color','red');
}
}
Go back to my example code, which I’ll post below. Some changes had to occur to get it working.
Can you find those changes?
$(document).on('click', '.one', function() {
alert('click1');
});
$(document).on('click', '.two', function(e) {
e.stopPropagation();
alert('click2');
});
Apolizes same question again the scenario is like below
.selected{
background-color: #000;
}
<div class="one" id="xyz">
<div class="two" id="xyz"></div>
</div>
$(document).on('click', 'one', function(){
$(this).data('clicked',true);
alert('click1');
zoom();
});
$(document).on('click', 'one', function(e){
e.stopPropogation();
alert('click2');
zoom();
});
function zoom(){
//some properties will goes here
if($('.one').data('clicked'){
$('.abc').each(function(){
$(this).text("Set1").removeClass('selected');
}
$('#xyz').text("Set2").addClass('selected');
}
}
Aha! I see your same question and raise with the same answer!
Go back to my example code, which I’ll post below. Some changes had to occur to get it working.
Can you find those changes?
$(document).on('click', '.one', function() {
alert('click1');
});
$(document).on('click', '.two', function(e) {
e.stopPropagation();
alert('click2');
});
Trust me - you will learn something.
ya I able to see the changes, just I am looking to change the text which is generation by jquery i.e .text('Set1) these, because using same function.
Good, because the larger amount of code that you posted still has the same problems causing you to fail.
When the changes that I made to get your code working, are applied to your larger code, it too will work in the same way.
Don’t mine can you implement it in jsfiddle.
You need to learn and improve your coding skills instead. I want you to learn about the problems that your code has, so that you will then know enough to fix them yourself.
In case you weren’t able to spot the difference, it can be hard, I know, the problems that your code had are two-fold.
Here is your code.
First, the selectors that you used weren’t picking up the div elements. You are using “one” which doesn’t work as a selector. Not unless you have an HTML element that looks like <one>...</one> which I highly doubt.
Instead, you are wanting to select an element by its class name. The fullstop is used to designate a class selector, and the # symbol is used to designate an id selector. In this case, it is the class selector that you are wanting.
That is why “.one” is the correct selector to use. Not “one”.
The second issue is that you have terrible spelling. stopPropogation needs to be stopPropagation instead. An o in the word needed to be changed to an a. From …ogation to … agation.
That’s all that needed to be done to get your code working. Now that you are aware of those issues, you can go and apply what you have learned.
@Paul_Wilkins: Thanks for the typo identifiers in code, just for scenario I have typed on the fly but in my original code those typos didn’t.
As you said atlast I have resolved issue myself learned new thing as well, and I am much appreciate you in this and also your patience and the way you are treating the users for giving reply’s politely with good explanations.
Kudos…
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.