Can someone explain to me or point me to other solution for this:
class fruit is in two different tag element, and one element has add class use in jquery selector, but the alertbox is not showing. ("add is clicked")
<table>
<tr>
<td>Apple</td>
<td>Apple 2</td>
</tr>
<tr>
<td>Banana</td>
<td>Banana 2</td>
</tr>
</table>
Also when i clicked the Apple link, i want the two alert box to show.
see this FIDDLE for demo.
$('.add').off("click").on("click", function () {
alert("add is clicked");
});
$('.fruit').off("click").on("click", function () {
alert("fruit is clicked");
});
You are already doing it correct, just remove "off".
$('.fruit').on("click", function () {
alert("fruit is clicked");
});
$('.add').on("click", function () {
alert("add is clicked");
});
Don't really know what you did, but i think you would like to have this results.
$('.add').click(function () {
alert("add is clicked");
});
$('.fruit').click(function () {
alert("fruit is clicked");
});
Look here :
http://jsfiddle.net/x957pbrr/1/
In your Fiddle, you are using off("click") before the on("click", function...). The first off clears all previously registered click handlers. So you are turning off the add click handler before you add the fruit click handler
The off method unbinds all prior bound click events.
I think you would be better off putting these events into one handler.
$('.fruit').click(function () {
if ($(this).hasClass('add'))
alert("add is clicked");
else
alert("fruit is clicked");
});
When you use ".off('click')" in 2, you remove the event handler added in 1.
1. ---
$('.add').off("click").on("click", function () {
alert("add is clicked");
});
2. ---
$('.fruit').off("click").on("click", function () {
alert("fruit is clicked");
});
Put it in reverse order:
$('.fruit').off("click").on("click", function () {
alert("fruit is clicked");
});
$('.add').off("click").on("click", function () {
alert("add is clicked");
});
Read this: http://api.jquery.com/off/
Related
I have a button with class name test-button test-button--check. After clicking test-button--check it should do something and be replaced by class test-button--reset
For test-button--reset I want to write another function, but It doesn't work. Because, the previous function executes again.
$(".test-button--check").on("click", function() {
alert("Check is clicked");
$(this).removeClass("test-button--check").addClass("test-button--reset");
});
$(".test-button--reset").on("click", function() {
alert("Reset is clicked");
$(this).removeClass("test-button--reset").addClass("test-button--check");
});
What can I do?
Thanks
You can write your code inside the document.ready in this way
$(".test-button--check .test-button--reset").on("click", function(e) {
e.preventDefault();
var obj=$(this);
if($(obj).hasClass('test-button--check')){
alert("Check is clicked");
$(this).removeClass("test-button--check").addClass("test-button--reset");
}
if($(obj).hasClass('test-button--reset')){
alert("Reset is clicked");
$(this).removeClass("test-button--reset").addClass("test-button--check");
}
});
Try using .off() to remove an event handler, in this case, it is click.
Should be something like this:
$('.test-button.test-button--reset').off().click(function() {...});
I think this will work:
var check = function checkFunc() {
alert('Check is clicked!');
$(this).addClass('test-button--reset').removeClass('test-button--check');
$('.test-button--reset').unbind('click',check);
$('.test-button--reset').bind('click',reset);
}
var reset = function resetFunc() {
alert('Reset is clicked!');
$(this).addClass('test-button--check').removeClass('test-button--reset');
$('.test-button--check').unbind('click',reset);
$('.test-button--check').bind('click',check);
}
$('.test-button--check').bind('click',check);
Using bind and unbind
My javascript:
$(".openPage").click(function() {
alert(1);
});
$(".openButton").click(function() {
alert(2);
});
My html:
<tr class='openPage'>
<td></td>
<td><button class='openButton'></button></td>
</tr>
When i click on my button inside the td the first function is fired instead of the function with alert(2). How can i fix this?
All you need is to event.stopPropagation() on the button item. That's all
$(".openPage").click(function() {
alert(1);
});
$(".openButton").click(function(evt) {
evt.stopPropagation(); // The click won't propagate to .openPage parent
alert(2);
});
Well, the elemen is contained within the first one.
But you can, if you really need do:
$('.openPage').click(function(e, event) {
if ( $(e).hasClass('openButton) ) {
$(e).trigger('click');
}
});
OR better
var page = $('.openPage');
page.click(function(e, event) {
if ( $(e) != page ) {
$(e).trigger('click');
}
});
You could also try:
event.stopPropagation();
When i click on any button , click event is not fired . Tough i made it work using $("div").on("click", "button", function () { but i want to see it working using .class selector .
Syntax of ON:
.on( events [, selector ] [, data ], handler )
Html:
<div>
<button class='alert'>Alert!</button>
</div>
Code:
$(document).ready(function () {
$("div button").on("click", ".alert", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
sample to work here
It may be basic but i'm seriously starting to try & understand few concepts . Help me understand .
Your current code is trying to delegate the event for element with class alert in button. which do not exists.
If you are trying to delegate the event for button with class alert,You need to use:
$("div").on("click", "button.alert", function () {
console.log("A button with the alert class was clicked!");
});
Working Demo
$(document).ready(function () {
$("div").on("click", "button.alert", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
You can also try this...
$(document).ready(function () {
$("div button.alert").on("click", function () {
console.log("A button with the alert class was clicked!");
});
$("<button class='alert'>Alert!</button>").appendTo("div");
});
FIDDLE for reference
I have this button that I can't change, nor can I edit toCashier():
<input type="button" value="Till kassan" onclick="toCashier()">
And I want to track if it's clicked and execute some javascript.
$(document).ready ( function () {
$('button[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
I tried that but it doesn't seem to work. I tried various things but can't get it to work.
You have mismatched input and button, try the following :
$(document).ready ( function () {
$('input[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
Or
$(document).ready ( function () {
$('input[type="button"][value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
button !== input
You need to use the correct selector.
$('input[value="Till kassan"]')
If you make the click with function, toCashier() function need to create :
function toCashier(){
alert("Night button clicked");
}
I would like to dynamically add a button control to a table using jQuery and attach a click event handler. I tried the following, without success:
$("#myButton").click(function () {
var test = $('<button>Test</button>').click(function () {
alert('hi');
});
$("#nodeAttributeHeader").attr('style', 'display: table-row;');
$("#addNodeTable tr:last").before('<tr><td>' + test.html() + '</td></tr>');
});
The above code successfully adds a new row, but it doesn't handle adding the button correctly. How would I accomplish this using jQuery?
Calling .html() serializes the element to a string, so all event handlers and other associated data is lost. Here's how I'd do it:
$("#myButton").click(function ()
{
var test = $('<button/>',
{
text: 'Test',
click: function () { alert('hi'); }
});
var parent = $('<tr><td></td></tr>').children().append(test).end();
$("#addNodeTable tr:last").before(parent);
});
Or,
$("#myButton").click(function ()
{
var test = $('<button/>',
{
text: 'Test',
click: function () { alert('hi'); }
}).wrap('<tr><td></td></tr>').closest('tr');
$("#addNodeTable tr:last").before(test);
});
If you don't like passing a map of properties to $(), you can instead use
$('<button/>')
.text('Test')
.click(function () { alert('hi'); });
// or
$('<button>Test</button>').click(function () { alert('hi'); });
Quick fix.
Create whole structure tr > td > button; then find button inside; attach event on it; end filtering of chain and at the and insert it into dom.
$("#myButton").click(function () {
var test = $('<tr><td><button>Test</button></td></tr>').find('button').click(function () {
alert('hi');
}).end();
$("#nodeAttributeHeader").attr('style', 'display: table-row;');
$("#addNodeTable tr:last").before(test);
});
Your problem is that you're converting the button into an HTML snippet when you add it to the table, but that snippet is not the same object as the one that has the click handler on it.
$("#myButton").click(function () {
var test = $('<button>Test</button>').click(function () {
alert('hi');
});
$("#nodeAttributeHeader").css('display', 'table-row'); // NB: changed
var tr = $('<tr>').insertBefore('#addNodeTable tr:last');
var td = $('<td>').append(test).appendTo(tr);
});
You can either use onclick inside the button to ensure the event is preserved, or else attach the button click handler by finding the button after it is inserted. The test.html() call will not serialize the event.
You were just adding the html string. Not the element you created with a click event listener.
Try This:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<table id="addNodeTable">
<tr>
<td>
Row 1
</td>
</tr>
<tr >
<td>
Row 2
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
var test = $('<button>Test</button>').click(function () {
alert('hi');
});
$("#addNodeTable tr:last").append('<tr><td></td></tr>').find("td:last").append(test);
});
</script>