Bind an event to a element not created yet jquery - javascript

I have a button that is not created until you click in a div.
I need to add an onclick event to that button, but I can't with the .on() method. It doesn't work.
<section class="span9 cont_llens">
<div id="llens"></div>
</div>
The script generates the blocks inside the #llens div. Then if you click a one of these blocks you may see the menu edition, up there it shows up.
So that's the binding I need, onclick to this buttons.
See the example here: http://jsfiddle.net/blackersoul/47YvE/

You can use $.on function for this function specifying the selector (second parameter).
Read http://api.jquery.com/on/
User like $('section').on('click', 'div#llens > button')
The reason why your code is not working because you are canceling the events via stopPropagation at two places. I have commented that in your fiddle and it is working.
See: http://jsfiddle.net/47YvE/4/

Related

jQuery link instead of button trigger

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.

How to trigger an event on a group of elements?

I have a listener on a group of elements:
$('a.menu__link').on('click',function() {alert('function was triggered');});
One element of which is:
<a class="menu__link menu__link--submenu Main" id="Events" href="#">Events</a>
I want to manually trigger a click on the element. Using Chrome dev tools, the event handler is:
a#Events.menu__link.menu__link--submenu.Main
However, the following code does not trigger the listener:
$('a#Events.menu__link.menu__link--submenu.Main').trigger('click');
I have tried every variation that I can think of, but I cannot find the correct reference to trigger the alert function.
What am I doing wrong?
You can use instead click instead of trigger like this to trigger a click :
$('#div').click();
Read more about click here
Here is a JsFiddle
I encased the trigger in a $(document).ready(function()) and that fixed it.
Kudos to Blazemonger for implying that it was a timing issue.
<script>$(document).ready(function() {
$('#Events').trigger('click');
$('#PastSeminars').addClass('menu__link--current');
});</script></body></html>
The lesson? Just because it is the last thing on the page, when in doubt, use document.ready.
Chrome blocks the click event from being programmatically fired. I'd come up with a new solution such as just calling the needed function wherever you need to trigger it.
You can read more about it here: https://teamtreehouse.com/community/why-does-my-onclick-event-not-fire-on-chrome

Bootstrap - Icon toggle with jquery

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");
});

jQuery .hover issue

Im trying to remove a class once the user hovers over a link.
Here is the HTML:
Fonctionalites
<div id="commercial_dd_total_FONCTIONALITES" class="menu_hidden">
<a class="commercial_dd_bg">Item One</a>
</div>
JS:
<script type="javascript">
$(document).ready(function(){
$("#menu_fonctionalites").hover(
function () {
$("#commercial_dd_total_FONCTIONALITES").removeClass("menu_hidden");
}
);
});
</script>
This isn't working.... any ideas about what I've done wrong?
http://jsfiddle.net/tuFru/1 it appears to be working here. You might include the CSS and describe what exactly isn't working for you. I updated it to take advantage of the second argument for hover as defined below:
Description
Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
version added: 1.0.
hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.
The .hover() method binds handlers for both mouseenter and mouseleave events. We can use it to simply apply behavior to an element during the time the mouse is within the element.
Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
See the discussions for .mouseenter() and .mouseleave() for more details.
If you are just trying to toggle visibility you could probably just add the normal class for the div styling and toggle it using the jQuery hide()/show() methods.

Jquery/Javascript: Buttons added dynamically with javascript do not work

I have a code chunk of html:
<div id="chunk-1" class="chunk">
<div class="chunkText">Text<div>
<button class="addChunk">Click Me</button>
</div>
<script>
$(".addChunk").click(function(){create_chunk(this.parentNode)})
function create_chunk(after_this){
$(after_this).after(chunk_html)
var i = 0
$("div.chunk").each(function(){$(this).attr('id', "chunk-" + i++)})
}
</script>
Now, this works, but only for the .chunk that is statically rendered on the page. When I press the button a second chunk appears, but that button does not work. If I add the html for two or more chunks to be rendered, each one works, but the buttons for the chunks it creates do not. What should I do?
The event handler in the below line attaches the click event to the element matching the selector when you add the handler.
$(".addChunk").click(function(){create_chunk(this.parentNode)})
you can use the live handler to do this. the following code will solve your problem
$(".addChunk").live('click'. function(){create_chunk(this.parentNode)});
Use the "live" jQuery function.
$(".addChunk").live('click'. function(){create_chunk(this.parentNode)});
The problem is that you're binding to a single element. The "live" option will monitor the document for any clicks on elements that have the ".addChunk" class.
replace
.bind()
with
.live()
or even better use
.delegate()
which is in your case:
$('#chunk-1').delegate('.addChunk', 'click', function(){create_chunk(this.parentNode);})
furthermore, go to www.jquery.com and read the documentation.

Categories

Resources