I am creating drag and drop thing. When drop happens I create new runtime html and want to bind it event, so I have used following .on
.on ( "event", "selector", function() {
but its not working. Here is Snippet :
$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
.on works before drag and drop. But afterwords nothing happens on clicking "button.edit-new-modal"!! What's wrong? Any solution?
try :
$(document.body).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
This
$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
should be :
$(document).on( "click", "button.edit-new-modal", function() {
When you wire up event handlers, they are bound to the existing HTML elements only.
As and when you insert dynamic HTML, you must wire up these handlers again.
In your case, you can wrap the event handler setup in a function like this :
function wireUpHandlers() {
$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
}
Call this method in your document.ready and then call this method again, after you have appened your dynamic HTML to the page
This is dynamic generated HTML so it will not work. Try using below code snippet
$(document).on( "click", "button.edit-new-modal", function() {
var photoId = $(this).attr('data-username');
alert(photoId);
});
Related
On the woocommerce cart page I would like to add a notice if you use the quantity plus button and it is reaching the max stock. But I have an auto update on the cart, so I have to wait until the ajax load finishes to show the notice. What I realised using my script that the more you press the button after each ajax call the more times it is fired and the notice will be displayed more and more times. How to handle this? Thank you.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var inputval = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').val();
var inputmax = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').attr('max');
if(inputval==inputmax){
jQuery( document ).ajaxStop( function($) {
alert("TeSZT");
jQuery('.woocommerce-notices-wrapper').html('<div class="woocommerce-info"><div class="woocommerce-info-text">Sajnos ebből a termékből jelenleg nincs több raktáron</div><span class="close-message"></span></div>');
});
}
});
You can try to disable to element to prevent multiple clicks. Enable this once ajaxStop is triggered for future use.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var $this = $(this);
$this.prop( "disabled", true );
...
jQuery( document ).ajaxStop( function() {
$this.prop( "disabled", false );
});
...
})
I have a few on click events who actually are doing the same thing. Someone told me I should use a case switch for this so I can reduce my code. But I don't know how to do that in combination with a on click event.
$( "#wishlist_top" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "wishlist" in menu']);
});
$( ".wishlist" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "plaats op wishlist"']);
});
$( ".product_size" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "maat advies"']);
});
$( ".product_stock" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "maat niet beschikbaar?"']);
});
if ( $('*').hasClass('404') ) {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klant is op een 404 pagina gekomen']);
}
Thank you!
While you can use a switch/case for this, it might not be the best idea. You still need to listen for click events on each class/ID, so I'd make a function and call that with the specific string.
Using your code from above, you can make a function like so:
function tagRecording(value) {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', [value]);
}
Now just use a click listener like so:
$( "#wishlist_top" ).on( "click",
function() { tagRecording('Klikt op "wishlist" in menu'); } );
So next time you want to change your code, you just change the tagRecording function (you can rename it however you like).
Another option here is to use data attributes in your markup. Add the message you want to pass to a data-text attribute in each of your elements -
<a href="#" class="product_stock" data-text='Klikt op "wishlist" in menu'>Foo</a>
And then you can set up one JS handler, which grabs the text from your data attribute:
$( ".product_stock" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', $(this).data("text"));
});
Of course this only works if you have control over the creation of the markup.
I'm trying to select a div for a click event but not the inputs within said div. I thought this would do it but it does not work. here is a demo. Thank you
html
<div id = "test"><input></div>
js
$('#test:not(input)').click(function(){
alert();
});
You could check to see if the clicked element is an input element using !$(e.target).is('input')
Updated Example
$('#test').on('click', function (e) {
var $target = $(e.target);
if (!$target.is('input')) {
alert('clicked');
}
});
When you click on the input, the click event bubbles to the div above it.
You can stop this by calling stopPropagation or stopImmediatePropagation on the event object.
http://jsfiddle.net/t66f06oL/1/
$( '#test' ).on( 'click', function() {
alert();
} );
$( '#test' ).on( 'click', 'input', function( e ) {
e.stopImmediatePropagation();
} );
When you click on the input control your click event is actually caught by the parent div. You can fix this by changing your code to this:
$('#test:not(input)').click(function(){
alert();
});
$('#test').find('input').click(function(e){
e.stopPropagation();
});
I am using table sorter plugin on my table //http://tablesorter.com/docs/index.html
And I want fire an event on click of the header that after sorting the column, I am trying as below
$("tableId").tablesorter();
$("thead th").click(function () {
alert("hi");
});
But want happens is my event fires first than plugin event, i want my event fire after the plugin's event...
Any Idea Plz...................
With jQuery 1.3+ :
$( "thead th" ).live( "click", function() {
alert( "hi" );
});
With jQuery 1.4.3+ :
$( document ).delegate( "thead th", "click", function() {
alert( "hi" );
});
With jQuery 1.7+ :
$( document ).on( "click", "thead th", function() {
alert( "hi" );
});
More here (http://api.jquery.com/live/)
You can bind to the sortEnd event which triggers after the table has sorted (demo; javascript is way at the bottom of the page):
$(function() {
$("table")
.tablesorter()
.bind("sortEnd",function() {
alert("hi");
});
});
I wouldn't fire another click event on the header within this event callback as you will create an infinite loop of clicking and sorting.
Also, in case you are interested, I have a fork of tablesorter with lots of improvements.
I have index.php and will load index-edit.php with a button click into index.php in a <div class="edit-wrapper"> </div>. I have some input in index.php and some input in index-edit.php. I want to add .active class to them on focus out, but jQuery does not add .active class to the ones in index-edit.php, but rest of them (which are not index-edit.php) works fine.
Look at my script.js.
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
Since the inputs are added dynamically, you need to use event delegation to register the event handler
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('focusout', 'input', function(event) {
$(this).addClass('active');
});
Where are you loading script.js ? Try this :
$(document).ready(function(){
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
});
need to use event delegation
$( document).on('focusout', 'input ', function() {
$( this ).addClass('active');
});