This question already has answers here:
Bind event to right mouse click
(8 answers)
Closed 9 years ago.
I have created a table using jquery. I can highlight a row when it selected by left click. I used this code for this....
<script type='text/javascript'>
$(document).ready(function() {
$("#tableData").delegate("tr", "click", function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
});
</script>
Now I want to select a row and change the color with rightclick also.. Please any one help me...
You can use the contextmenu event:
$("#tableData").delegate("tr", "contextmenu", function(e) {
alert('Context Menu event has fired!');
//Do functionality here
return false;
});
You can use which property of the event object:
<script type='text/javascript'>
$(document).ready(function() {
$("#tableData").delegate("tr", "mousedown", function(event) {
if(event.which == 3){
$(this).addClass("selected").siblings().removeClass("selected");
}
});
});
</script>
Here is an example: http://jsfiddle.net/Eknr6/
You already "selected" your row, you can retrieve the currently selected row with :
$('tr.selected')
To change color just change your css according to your selected class, here some examples :
tr.selected{
color:red;
}
tr.selected a{
color:black;
}
you might also want to add this into your script :
event.stopPropagation();
event.preventDefault();
If you have any event under that they won't trigger for your click event (the event won't bubble up or down)
Related
This question already has answers here:
Direct vs. Delegated - jQuery .on()
(6 answers)
Closed 4 years ago.
I'm trying to add a data-name attribute on clicking one element and then when that element is clicked do something else.
$(".btn01").on("click", function() {
$(".next").attr("data-name", "btn02");
});
$("[data-name='btn02']").on("click", function() {
console.log("I clicked this button");
});
It is updating in the DOM but not working?
Any ideas?
You must use event delegation since the attribute you're using in the selector of the second click event [data-name='btn02'] is created dynamically by the JS code:
$(".btn01").on("click", function() {
$(".next").attr("data-name", "btn02");
});
$("body").on("click", "[data-name='btn02']", function() {
console.log("I clicked this button");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn01">CLICK ME then click the span bellow</button>
<br><br>
<span class="next">Next span</span>
Try the following, use event delegation for attaching event to "[data-name='btn02']", as $("[data-name='btn02']") element will not exist till $(".btn01") is clicked.
$(".btn01").on("click", function() {
$(".next").attr("data-name", "btn02");
});
$(document).on("click", "[data-name='btn02']", function() {
console.log("I clicked this button");
});
If you are just trying to make it so the first button needs to be clicked before the second can, you can just use a boolean variable for that:
var firstButtonClicked = false;
$(".btn01").on("click", function() {
firstButtonClicked = true;
});
// the second button
$(".next").on("click", function() {
if (firstButtonClicked == true) {
console.log("I clicked this button after the first one");
}
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I'm trying to use a button that is printed by .html(). I've tried .find() after searching through this site but the onclick event still seem not detected.
<div id = "div4html">div</div>
<button id="printbtn">printbtn</button>
<script>
$("#printbtn").on( "click", function() {
$("#div4html").html('<button id ="btntest">btntest</button>');
});
$("#div4html").find("#btntest").on( "click", function() {
alert("on click");
});
</script>
while the #btntest onclick doesn't show an alert, the CSS on #btntest works.
There is something I don't know about elements that are created dynamically?
You can't do this because js don't even for events in newly created content by default.
Here is the way to do it :
$("#div4html").on('click', "#btntest" , function() {
// Your code
}
You need to do:-$("#div4html").on( "click", "#btntest", function() {
It's called:- Event Delegation
Example:-
$("#printbtn").on( "click", function() {
$("#div4html").html('<button id ="btntest">btntest</button>');
});
$("#div4html").on( "click","#btntest", function() {
alert("on click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "div4html">div</div><br>
<button id="printbtn">printbtn</button>
Delegate the event from the body
$("body").on( "click",'#btntest', function() {
alert("on click");
});
This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 6 years ago.
I have a Checkbox in my index.html file as
#Html.CheckBoxFor(m=>m.isChecked, new { id = "isChecked" })
<div id='Shipping'>
<p> Some textboxes here </p>
</div>
I would like to hide the sipping div if the checkbox is checked and unhide if not checked. And i would like it to be dynamic. How do i do that?
I guess you'd first bind to the check box's change event:
$('#isChecked').change(function() {
//...
});
Within that event handler, you'd then show/hide the div based on the state of the check box. Possibly something like this:
if ($(this).is(':checked')) {
$('#Shipping').show();
} else {
$('#Shipping').hide();
}
Of course, you'll also want to set an initial value. A simple way to accomplish both would likely be to wrap the logic in a function:
var toggleDiv = function () {
if ($('#isChecked').is(':checked')) {
$('#Shipping').show();
} else {
$('#Shipping').hide();
}
}
Then call it from the event handler above:
$('#isChecked').change(toggleDiv);
And also when the page loads:
toggleDiv();
You just need to bind a change event to the checkbox and check it's :checked selector to determine if the div needs to shown or hidden.
<script>
$().ready(function(){
$('#isChecked').change(function()
{
$(this).is(":checked") ? $("#Shipping").show() : $("#Shipping").hide();
}).change(); // optional
});
</script>
javascript:
$('#isChecked').change(function(){
if($(this).is(":checked")) {
$(this).removeClass("hide");
} else {
$(this).addClass("hide");
}
});
css:
.hide{ display:none;}
HTML:
<div id='Shipping' class='hide'> </div>
$('#isChecked').change(function(){
if($(this).is(":checked")) {
$("#Shipping").hide()
} else {
$("#Shipping").show()
}
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am seeking for a simple function to be called (without any arguments) over DOM element
That will stop listening to all the events binded to that DOM element and also on all of its children and grand children.
That will bring back that DOM element to listen back to all the events that was registed before calling function 1. Means getting back that DOM element to previous initial state.
How can i do that.
I have searched over www. I found that very relevent http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/ But could not found my answer
Just trying off() : It removed all the event handlers.
So calling back on() doesn't brings DOM element back to previous state.
So how can i achieve my goal?
You can access to the internal events list of each element, save the list somewhere such as as a property of the element (to restore later) and set the events list to null to remove all the events handlers. Here is the demo code:
HTML:
<div id='container'>
<h2>Click me</h2>
<div>
Hover me
</div>
</div>
<label><input type='checkbox'/>Remove events</label>
CSS:
#container {
padding:30px;
background:red;
width:200px;
}
h2 {
cursor:pointer;
}
#container > div {
background:green;
padding:30px;
}
JS:
//init events handlers
$('h2').click(function(e){
alert('clgt?');
});
$('#container > div').hover(function(e){
this.style.background = 'blue';
}, function(e){
this.style.background = 'green';
});
$('#container').hover(function(e){
this.style.background = 'orange';
}, function(e){
this.style.background = 'red';
});
var elements = $('#container, #container *');
elements.each(function(i, e){
//access to the events list of each element and save that list
//into a property called events
e.events = $._data(e, "events");
});
$('input:checkbox').change(function(e){
if(this.checked) elements.each(function(i,elem){
//off
$._data(elem, "events", null);
})
else elements.each(function(i,elem){
//on
$._data(elem, "events", elem.events);
})
});
Demo.
Note that the code above works when all the event handlers are registered once time intially, if then there may be others added, you should save the list into events property before setting it to null like this:
$('input:checkbox').change(function(e){
if(this.checked) elements.each(function(i,elem){
//save first to restore later
elem.events = $._data(elem, "events");
//off
$._data(elem, "events", null);
})
else elements.each(function(i,elem){
//on
$._data(elem, "events", elem.events);
})
});
Fiddle
After using off() you need to bind all events again, something like this
$('#yes').click(function () {
$('.parent, .children,.grandchildren').on({
mouseenter: function () {
alert(this.innerHTML);
},
mouseleave: function () {
alert(this.innerHTML);
},
click: function () {
alert(this.innerHTML);
}
});
});
Working Fiddle asked in the question
Based on my answer here
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery: click function exclude children.
I have two divs, something like this:
<div id="parent" style="width: 100%; height: 100%; background-color:red;" />
<h1>I'm the parent!</h1>
<div id="child" style="width: 300px; height: 200px; background-color:yellow;">
</h2>..and I'm the child!</h2>
</div>
</div>
Additionally, I have the following JavaScript code:
$(document).ready(function(){
$('#parent').click(function(){
alert('Parent was clicked');
});
});
The problem is, if I click on the child, the event is triggered. How can I limit this event to the parent only?
Edit: Just to clarify; I want this action to trigger when the user clicks anywhere in the red. As said in the comments; the h1 is not the parent. Tjirp's answer did the trick, and there's a lots of working variants of this solution in the answers.
This should work
$(document).ready(function() {
$('#parent').click(function(e) {
if (e.target == this) {
alert('Parent was clicked');
}
}
}
This way you won't have to bind anything to your childs. The click event is propagated to your click handler, and it checks if the target of the click event is indeed the element you added the event on.
Edit: I was right. this is not the most efficient way, Alessandro Minoccheri answer should be way faster. I updated my code with his.
Try this:
$('#parent').click(function(data, handler){
if (data.target == this) {
//Do Stuff (only element clicked, not children)
}
});
h1 is not the parent, div#parent is the parent.
clicking div#child triggers click on div#parent because of event bubbling.
this will prevent event bubbling:
$('#child').on("click", function() {
return false;
});
The easiest solution is to check that the element that originated the event (event.target) is the same as the element handling the click event handler (this):
$('#parent').click(function(event){
if(this === event.target) {
alert('Parent was clicked');
}
});
Here's a working jsFiddle.
You can try something like:
$(document).ready(function(){
$('#parent h1').click(function(){
alert('Parent was clicked');
});
});
$(document).ready(function(){
$('#parent').click(function(){
if($(this).not("#parent")) {
return false;
} else {
alert('Parent was clicked');
};
});
});