I have a button of class 'add' which, when clicked simply clones itself and its other div siblings. The cloning works fine, however the click functionality only works on the first instance of the button (the one that loads with the page) and not on any subsequent instances.
Any help would be great.
$('.add').click(function(){
cloneDiv();
});
Use the live method for dynamically added elements:
$('.add').live('click', function(){
// your code...
});
Related
I have this code in the bottom of the page:
$('.checkbox-class:checkbox').on('click', function () {
alert($(this).val());
});
I have a datatable with a td with this input:
<input class="checkbox-class" type="checkbox" name="compartir[]" value="{{$row->id}}">
I can see the alert on each click of the checkbox of the first page, but when I move to the 2nd page, the script is not listening this clicks. But, if I reload the page, and move first to the 2nd page, then I do my first clicks, javascript can catch them well, but if I move to the 1st page, javascript doesn't listen them (on that, the 1st page)
I don't get it whay is happening this.
EDIT: A fiddle about it:
https://codepen.io/anon/pen/EBjNPW
You can use delegation for the event by attaching it to the table itself and only firing on the specific class type, I take it you are using JQuery as you have it in your example above, so this should serve your needs, notice how the 2nd parameter of .on is the className of the checkbox items in the table, this will then fire anytime a checkbox with that className inside the parent table is clicked:
$('#yourTable').on('click', '.checkbox-class:checkbox', function(){
alert($(this).val());
});
I have a div that is duplicated when a button inside that div is clicked. Each duplicated div also contains a button that should duplicate the div. Right now, only the original div "duplicate" button works. I need each button to duplicate the div which contains the button. Here is the my jQuery.
$(function() {
$('.duplicate-button').each(function() {
$(this).click(function() {
$(this).closest('.desking-finance').clone().appendTo('.extra-finance-lease');
});
});
});
The problem is with the execution of this function. It only targets existing elements and not potentially new elements that may be created.
In order to have this function execute on click for every (new or old) div, use live to target them. Here is the refactored code:
$(function() {
$(document).on('click', '.duplicate-button', function() {
$(this).closest('.desking-finance').clone().appendTo('.extra-finance-lease');
});
});
I used document to bind the click handler but try and use a closer parent element relative to the duplicate-buttons. Perhaps some container div.
There was no need for $.each since $(this) will target the targeted element that triggered the event.
on jquery mobile web app I'm calling js function on close button. That js function close it's callers div parent.
That works fine, but problem is that I have multiple close buttons and this function works perfectly first time,
after that onclick doesnt work. It doesnt enter into js function.
I tried to put js function at very bottom of my _Layout.cshtml page but it doesnt change anything.
update
<script type="text/javascript">
$('#closeTable').click(function () {
$(this).parent().hide();
});
</script>
<div id="closeTable"></div>
Your problem is originating from the fact that you're using an ID to add event listeners to. In your JS, you have this line:
$('#closeTable').click(function () { ...
This line attaches a click event handler to the div with ID closeTable. Since there can only be one element with this ID, once it's hidden the user can't click it again and so the function won't be executed again.
If you have multiple close buttons as you say, you should instead use a class selector to attach handlers:
$(".closeTable").click(function() { ...
This will instead attach a listener to every element with class closeTable. This means that when any of them are clicked the function will execute, so it will work multiple times.
Hope this helps.
I have some elements having fbutton class. How can I bind a click element only to clicked element. I have a code like this:
$('.fbutton').click(function() {
/*
Some Code 1
*/
$(this).next().click();
/*
Some Code 2
*/
enough;
});
$(this).next().click(); line triggers a click on an element, but also all other fbutton elements are triggered too (this part bothers me).
First solution that comes to mind is that end script processing after Some Code 2. As return; does not work, I used an illegal javascript code that results abnormal end of execution of code. It works, but it is not the correct way of ending execution. How can I end javascript execution or How can I trigger an event only for clicked element.
More Clarification
I want only clicked .fbutton to trigger. So does jquery identify clicked element? Also I can not define any class for any .fbutton element, because trigger should depend on user click.
Have you tried using stopPropagation?
$('.fbutton').on('click',function(e){
e.stopPropagation();
$(this).next().trigger('click');
});
onclick give it a class, and bind the click triggering to it.
$('.fbutton').on('click',function() {
// Code 1
$(this).hasClass('clicked')) ? $(this).next().trigger('click') : $(this).addClass('clicked');
// Code 2
});
Also, using jQuery vs $? I kept it consistent for you, but if you can use $ I recommend it.
EDIT
To clarify my answer:
This is a ternary if statement. It checks to see if the item clicked has a class of clicked, and if it does, then it assigns the click you want to $(this).next(), but if it doesn't have the class already it adds the class (without binding the click statement yet). When the element is clicked again, it will have class clicked, so it should fire then.
This allows you to only have the click event binded to elements that have already been clicked.
SECOND EDIT
Here is a jsFiddle to show it works.
Click example once and nothing will happen but adding the class, click it again and it will trigger the click of the next button, but not anything else. The same is true for the second button, so that you can see they are separate events for each pairing, unrelated to any other button pairs.
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");
});