I have done this million times before but this time it simply will not work!
I have a function that dynamically adds a form with a link that will act as a button
content += '<a name="btn-opprettKontakt" id="btn-opprettKontakt" class="btn-opprettNy btn btn-small btn-primary pull-right" data-action="opprettKontakt">Opprett</a>';
return content;
Then I have this event handler for the link
$('body').on('click','.btn-opprettNy', function() {
alert('button clicked');
});
The form is inside a select2 container, which is also dynamically added, so there is no parent element other than 'body'. But this never fires.
I also have an event handler for all 'button' elements that checks the data-action, which works on all other buttons. If I change this link to a button it never fires either.
Am I missing something here? .on() should work for dynamically added elements if I use an element that exists on document.ready, like 'body' , right?
Maybe the select2 container is messing things up?
I have other event handlers on dynamically added elements that work just fine.
UPDATE
Select2 kills all mouse events inside the dropdown. The only solution I have found so far is to use an inline onclick
Select2 kills all mouse events inside the dropdown.
The only solution I have found so far is to use an inline onclick
Here is also a solution that might help others with similar issues.
Related
So, i have this code snippet that opens a modal:
<button id="trigger-overlay" class="order">Open Overlay</button>
Now, i wanted to include it in Wordpress menu, but i cant add button tag there, so i added:
Open Overlay
And i am using jquery to add a ID to that link, like this:
$('.order').attr('id','trigger-overlay');
ID is added, but link doesnt open anything, aka, it links to "#" instead of opening a modal...
How could i fix this to make it work?
Thanks!
This thing may causing due to events binging order. So, your code $('.order').attr('id','trigger-overlay'); is executing right after click's binding event (I think that event looks like this one: $('#trigger-overlay').click(function() { ... });.
If you have ability to change that binding, please use jquery.on method: http://api.jquery.com/on/
So that code will looks like: $(document).on('click', '#trigger-overlay', function() { ... });.
Also you can just move $('.order').attr('id','trigger-overlay'); above the script with that event binding.
Based on your
<button id="trigger-overlay" class="order>Open Overlay</button>
I'm not sure how you got a modal to trigger, since it is not connected to an event handler like:
<button onclick="turnOverlayOn()">Demo Button</button>
In this case, there would be a function that targets the overlay/modal and turns its CSS display property from none to block or inline-block (however you would like to display it):
var turnOverlayOn = function () {
$('targetOverlayId').css('display','block')
}
I suggest focusing on attaching an onClick event that triggers a function that does what you want to make the overlay appear.
The function used to turn the overlay off could be:
var turnOverlayOff = function () {
$('targetOverlayId').css('display','none')
}
You could attach this to a different anchor tag or button to turn the overlay off.
Note: the event should work the same for an anchor tag as it does for a button.
In my understanding you want to trigger the button click event. Using the a tag with class order.
try
jQuery(document).on('click','.order',function(){
jQuery('#trigger-overlay').click();
});
You can trigger the click event using jquery. Since I have no knowledge of your DOM structure jQuery(document).on('click','.order',function().. will work even if your elements are dynamic (added to the DOM after the script execution) because the click event is bind to the document.
NOTE:
When using wordpress always use jQuery instead of $ to avoid conflicts.
Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.
We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();
While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here
The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt
You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');
try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/
I'm trying to trigger my own custom events as global events, so that anything on my page can listen to them and react, however, for dynamically added content it's not working. See my fiddle at: http://jsfiddle.net/6TMkG/8/
As far as I understand, the event is triggered for any element in the page that jQuery knows has a handler for it, and it seems it doesn't trigger the event for the li's even though they do have a handler.
Anyone know how to get around this behaviour?
try this
$("#b2").click(function() {
//$.event.trigger("randomEvent");
$('li').trigger('randomEvent');
});
If you want global event, then you could bind the event handler on document, and trigger it on any element in the document.
$(document).on('randomEvent', callback);
$('ul').click(function() {
$(this).trigger("randomEvent");
});
Sorry I completely missed that.. I did not see the first part of your question.. Custom events.. Looks like you are associating the randomEvent but you are not triggering that event when that is associated with it..
Make sure you add the trigger Event in the Document.Ready function so that the evnet handler is associated with as and when the element is available.
I got a little problem trying to toggle an icon of Bootstrap. When i run code it does what expected the first time you click on the icon it toggle's, but when i click again it doesn't change. Here its my code and any help will be appreciated!
<a><i class="icon-plus"></i></a>
<script>
$(".icon-minus").click(function(){
$(this).removeClass("icon-minus").addClass("icon-plus");
});
$(".icon-plus").click(function(){
$(this).removeClass("icon-plus").addClass("icon-minus");
});
</script>
Update 1:
This icon is for a collapsible menu and the code of that can be found here :)
jsBin demo
$(".icon-minus, .icon-plus").click(function(){
$(this).toggleClass("icon-minus icon-plus");
});
Or this if you dynamically create your elements:
$("#parent_el_NOT_dyn_gen").on('click','.icon-minus, .icon-plus',function(){
$(this).toggleClass("icon-minus icon-plus");
});
The jQuery's selector selects DOM elements then applys the click handler to them. It's not re-evaluating the selector after you change the classes on the element.
You probably want the delegate() / on() method from jQuery to dynamically change the the handler that's fired when the item is clicked. Delegate works with event bubbling and will handle the click and evaluate if the source of the click matches the selector (at the time of the click) as opposed to the .click() which attaches the handler directly, once (at the time of page-load or whenever the code was ran).
Another solution is to change the handler somehow, either by evaluating what class is on the existing element or using toggleClass() which will check for a class then invert it.
$(".icon-minus, .icon-plus").click(function() {
var $this = $(this);
if ($this.hasClass("icon-plus")) {
$this.removeClass("icon-plus").addClass("icon-minus");
return;
}
if ($this.hasClass("icon-minus")) {
$this.removeClass("icon-minus").addClass("icon-plus");
return;
}
});
This method will be slightly faster than using on() / delegate() because it's handled at the root handler and not bubbled & checked afterwards. It's also not susceptible to any breaks in the event bubbling. (ie. event.stopPropagation())
Simple solution worked for Bootstrap 3.
$('[data-toggle="collapse"]').click(function(e) {
$(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});
I have a webpage with 100+ hyperlinks that all have the onClick and href attribute set. This works for the most part but I've run into the issue where browsers like IE7 use the href attribute over the onClick attribute. I need the onClick attribute to be the default so my function will load on click. I figured I could easily do this using jQuery and setting the click event to the onClick attribute value but I'm not having any luck, how would I go about this? Right now the code below sets TONS of click events to a single hyperlink. When I click a hyperlink I can watch the GET events sent multiple times for the hyperlink.
$("a[href*='/RightSizeOption/NewForm.aspx']").click(function() {
OpenPopUpPage($(this).attr('href'), RefreshPage);
return false;
});
Doesn't seem to make sense, unless that exact click handler is actually being bound multiple times. A better way of binding clicks is with delegate (also using preventDefault instead of return false for good measure):
$('#myParent').delegate("a[href*='/RightSizeOption/NewForm.aspx']", "click", function(event) {
event.preventDefault();
OpenPopUpPage($(this).attr('href'), RefreshPage);
});
#myParent is any ancestor element that is not expected to get destroyed; could be a wrapper div or 'body' even, though it's better to pick the closest common ancestor that never gets destroyed.
But what worries me is the multiple binding; if your sample code is within a function, that function is being fired multiple times, for example.
I'm also not certain about the "RefreshPage" that you're passing to OpenPopUpPage. I'd have to see what OpenPopUpPage does to even hazard a guess.