I have a hidden div on page which needs to be opened on click function.
The click-able link is inside the bootstrap popover so how can I get the page div opened by clicking on popover content link.
here is the Fiddle
$( "#open" ).click(function() {
$('.open-this').slideToggle("slow");
});
instead of this code:
$( "#open" ).click(function() {
$('.open-this').slideToggle("slow");
});
try this
$("body").on("click","#open",function(e) {
e.preventDefault();
$('.open-this').slideToggle("slow");
});
check out the updated fiddle http://jsfiddle.net/bfkLM/15/
The problem on your code is that the link is generated from your code and not presented in the dom when your event handler is trying to get it to attach the click event to it.
so the solution is to use Delegated events:
from the official; jquery website
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document. The
document element is available in the head of the document before
loading any other HTML, so it is safe to attach events there without
waiting for the document to be ready.
that's why my new code will work because it attaches the event handler to the body tag and checks that a click event is coming from my target element (open), when this happen it will fire up my code and the popup will be displayed
one more thing, the use of e.preventDefault(); is to prevent the page from navigating to the href property of your anchor.
The event is not attached to the link, because I guess you aren't doing it after document is ready.
For testing purpose I've added onclick function to the link
onclick="$(\'.open-this\').slideToggle("slow");return false;"
and it worked.
Fiddle
Solution:
$(function(){
$( "#open" ).click(function() {
$('.open-this').slideToggle("slow");
return false;
});
});
Related
first i created navigation click event
$('#inner-navigation li a')
.on('click', function (e) {
e.preventDefault();
AjaxNavUrl.checkURL(this.hash);
});
then it conducts ajax call and response html data
based on navigation key
$(".panel-body").html(data);
first ajax click working nicely..
then whithin that responese html data there is rest of click event and ajax call like
$(document.body).on('click', '.page-demos .page-wrapper', function (e) {
e.preventDefault();
and this
$(document.body).on('click', '.button-next', function (e) {
e.preventDefault();
but it seems like click event or e.preventDeafult() function is not working
I got the answer from jQuery doc here is what I learned,
Event Propagation
Understanding how events propagate is an important factor in being able to leverage Event Delegation. Any time one of our anchor tags is clicked, a click event is fired for that anchor, and then bubbles up the DOM tree, triggering each of its parent click event handlers:
<a>
<li>
<ul #list>
<div #container>
<body>
<html>
document root
This means that anytime you click one of our bound anchor tags, you are effectively clicking the entire document body! This is called event bubbling or event propagation.
Since we know how events bubble, we can create a delegated event:
$("#list").on("click", "a", function(event) {
event.preventDefault();
console.log($(this).text());
});
Notice how we have moved the a part from the selector to the second parameter position of the .on() method. This second, selector parameter tells the handler to listen for the specified event, and when it hears it, check to see if the triggering element for that event matches the second parameter. In this case, the triggering event is our anchor tag, which matches that parameter. Since it matches, our anonymous function will execute. We have now attached a single click event listener to our <ul> that will listen for clicks on its descendant anchors, instead of attaching an unknown number of directly bound events to the existing anchor tags only.
linkUsing the Triggering Element
What if we wanted to open the link in a new window if that link is an external one (as denoted here by beginning with "http")?
// Attach a delegated event handler
$("#list").on("click", "a", function(event) {
var elem = $(this);
if (elem.is("[href^='http']")) {
elem.attr("target", "_blank");
}
});
This simply passes the .is() method a selector to see if the href attribute of the element starts with "http". We have also removed the event.preventDefault(); statement as we want the default action to happen (which is to follow the href).
We can actually simplify our code by allowing the selector parameter of .on() do our logic for us:
// Attach a delegated event handler with a more refined selector
$("#list").on( "click", "a[href^='http']", function(event) {
$(this).attr("target", "_blank");
});
The click binding adds an event handler so that your chosen JavaScript function will be invoked when the associated DOM element is clicked. This is most commonly used with elements like button, input, and a, but actually works with any visible DOM element.
Example
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
var viewModel = {
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};
</script>
Each time you click the button, this will invoke incrementClickCounter() on the view model, which in turn changes the view model state, which causes the UI to update.
What happens to the dom when you re-render a partial with js.erb? I can no longer get click events.
Based on this tutorial, I have followed it to re-render a js.erb partial which works fine. When I click the "cat.name" button (on linked page), and on that page is another button that I'm listening for click events but not working.
The run down:
On index page, click event works. When I make the request for from_category, no more click event. So what really happen?
Html:
<button id="test" value="ok">click</button>
JS:
$( "#test" ).on("click", function(e) {
console.log(e.target.value)
});
You click events don't bind to the new dom elements you should use event delegation to bubble the events to the newly created dom elements
$('body').on('click input keypress','.the_dynamic_element',function(){
});
No need to bind the event on body you can use this format to bind the event to the selector
$(document).on('click', '#test', function(e) {
console.log(e.target.value)
});
I need to attach a JavaScript click listener to an add new record confirmation on a DevExpress gridview.
I can't use a regular click event listener as it's loaded via AJAX integrated into the control. I also have no access to the button's code so am unable to extend it.The only thing I do have is the button name.
Ideally I want to listen for the appearance of the button on the DOM and then attach the listener, is there any way to do this?
You do not need to wait for the appearance of the button in the DOM.
Just use a delegated event handler attached to a non-changing ancestor of the dynamic elements.
e.g.
$(document).on('click', '.someclass', function(){
///
});
If you only have the element name for the button use an attribute selector:
e.g.
$(document).on('click', '[name="somename"]', function(){
///
});
Delegated events work by listening for events bubbling up to a non-changing ancestor (document is the default if nothing closer is available). It then applies the selector at event time (not at event registration time). It then calls the function for any matching element that caused the event.
The end result is that it will work with elements that may exist later, when the event occurs.
Note: if nothing is closer to the dynamic content, use document, but do not use 'body' as styling can make it have a zero height and delegated mouse events will not work!
After using AJAX to load a partial view in to a dialog on the page, this code, located in the partial itself NOT in the main page, runs and I get tabs as expected:
// Run this on page load
$(function () {
debugger;
$("#ProjectTabset").tabs();
});
This being the case, if the div containing the partial was removed from the DOM (using jQuery remove) then added again and the partial loaded in to it once more, it should run again, but it doesn't.
Why would it run the first time, but not any subsequent time? Could the problem be that the div in to which the partial is being inserted is not really removed somehow? (Though I am testing it is not present before creating, and it seems it is no longer part of the DOM.)
Please let me know if I can be more clear or provide any more detail :)
Since you have removed the element from DOM and added back dynamically you may need to use the delegated events via on() if you want events to be handled on dynamically added elements. Try the below and see if it helps.
$( document ).on( 'ready', function (e) {
$("#ProjectTabset").tabs();
})
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to
.on(). To ensure the elements are present and can be selected, perform
event binding inside a document ready handler for elements that are in
the HTML markup on the page. If new HTML is being injected into the
page, select the elements and attach event handlers after the new HTML
is placed into the page. Or, use delegated events to attach an event
handler, as described next.
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers.
May be the links here will help you resolve the problem.
You should use .delegate():
// Run this on page load or ajax load complete
$('body').delegate('#ProjectTabset', 'ready', function() {
$("#ProjectTabset").tabs();
});
UPDATE:
$(document).delegate('#ProjectTabset', 'click', function() {
$('#ProjectTabset').tabs();
}
$.ajax(function(){
...
success: function(){
$('#ProjectTabset').click();
}
})
I want a new text input box will be appended when i click onto the latest generated text box.
But It generates new text input box only when i click the first text input box. So, any solution?
<script type="text/javascript">
$(function(event){
$('.add-new').click(function(){
$('.add-new').removeClass();
$('form').append("<br><input type='text' name='user[]' class='add-new'/>");
});
});
</script>
<div>
<form method='post' name='login'>
<input type='text' name='user[]' class='add-new'/>
</form>
</div>
$('form').on('click','.add-new', function(){
Direct event => Delegate Event
Live DEMO
Full code:
$('form').on('click', '.add-new', function() {
$(this).removeClass('add-new');
$(this).closest('form').append("<br><input type='text' name='user[]' class='add-new'/>");
});
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.
on docs
demo http://jsfiddle.net/JuvwB/8/
Plz note: you should use $(this) as your even is bind to .add-new already.
rest all the above are nice solutions,
Hope this helps, cheers
code
$(function(event){
$('.add-new').on('click', function(){
$(this).removeClass();
$('form').append("<br><input type='text' name='user[]' class='add-new'/>");
});
});
$('form[name=login]').on('click', '.add-new', function() {
$(this).removeClass(); // $(this) instead of $('.add-new')
// $(this) point to the clicked element
// which you want
$('form').append("<br><input type='text' name='user[]' class='add-new'/>");
});
As you're changing the class name add-new and append new element dynamically with same class, so you need delegate event.
Read more about .on()
Note
syntax of .on() for delegate event
$(container).on(eventName, target, handlerFunction)
The reason why this doesn't work is because when you set the 'click' event your target doesn't exist, so no 'click' event is bound to it.
jQuery has a fancy function called the 'on' function that catches bubbling events.
$(document).on('click','.add-new', function(){
}
All events (click, mouseover, etc) start in the deepest node and bubble up through the html tree until the document. It is safe for you to catch them in the document, unless you explicitly call "stopPropagation" or return false on a processed in the middle of the bubling click handler function.
You can also catch it in the middle of the tree with $("form").on... or even $("div").on...