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());
});
Related
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'm having issues preventing a child element from activating a parent click event in jQuery. I've Google'd around and have stumbled upon a couple different solutions, none of which appear to work for me.
I need to make a table cell editable after clicking it so that I can submit the edited text asynchronously via ajax. I'm using jQuery to replace the text with an input field but it then can't be edited or submitted because each click fires the parent event again.
I've tried using:
$("child").click(function(e){
e.stopPropagation();
})
And also .unbind("click") on the parent as once it's been clicked it won't need to be clicked again but this seems to unbind the child too.
I've prepared a fiddle in order to properly show the problem.
Any help at all would be super! It's driving me crazy.
The problem is because the .btn-comment element is being dynamically appended, so you need a delegated handler. Try this:
$(".td-edit").on('click', '.btn-comment', function(e) {
e.stopPropagation();
});
Updated fiddle
Note in the fiddle - you can see the event is not being propagated because the alert() does not fire when clicking the button element.
A couple things here.
Everytime you click onto the table cell, you're regenerating the form elements. This includes not only the click on the cell to switch the contents to the edit control, but also when you click onto the textfield to focus on it to perform text changes
The click for your button, will never fire, as it's being bound BEFORE the control exists in the dom.
My suggestion would be to have the controls already exist on the page, but have the clicking of the element be for controlling the VISIBLITY of the textbox. Additionally, put the text to be clicked into a span or label or div, and click on it that way, as opposed to the actual cell.
$("#td-edit").click(function() {
$("#td-edit").hide();
$("#dvEdit").show();
});
$("#btn-comment").click(function(e) {
$("#td-edit").show();
$("#dvEdit").hide();
});
Updated fiddle
I've updated your fiddle and it seems to work with what I created. Putting it here as well for reference:
function clickEdit() {
$(this).html("<div class=\"input-append\"><input class=\"updater-text span2\" type=\"text\" value=\"" + $(this).text() + "\" /><button class=\"btn-comment\" type=\"button\" id=\"appendedInputButton\">Save</button>").off('click');
$('#appendedInputButton').on('click', function(e) {
e.stopPropagation();
e = $(this);
console.log(e.prev().val());
e.parent().html(e.prev().val()).on('click', clickEdit);
});
}
$(".td-edit").on('click', clickEdit);
Fiddle link: http://jsfiddle.net/9F67j/14/
I have created divs with Click Event based on a value entered in a text box.
An Example Here
When you open the page and click any of the rows, you will get an alert. But when you change the value in the text box (Enter Number) and hit load button, then the rows will load based on the number entered.
Now when you click any rows, the click event does not work.....
Any Help in this regard is highly appreciated..........
You need the live function.
$(".schoolselect").live("click", function() {
See here: http://jsfiddle.net/27Z3t/
Your click handler for $('.schoolselect') is only attached once when the page loads. It is not a live jQuery event but that technique is deprecated in favour of the delegate model.
You can attach a delegate to $('#divHSSchoolResultTable') that will handle the clicks;
$('#divHSSchoolResultTable').delegate('.schoolselect', 'click', function() { alert(); });
See jQuery delegate for more details.
I have a slideshow that has 5 slides (each has an individual id) and a previous and next button. When hovering the previous or next button you get a tooltip, the tooltip uses jQuery to get the ID attribute from the previous and next div and show this.
Ive gotten it working fine on mouseenter only if you dont leave the div and keep clicking the Tooltip doesnt update, you have to leave the arrows after each click for the value to be aupdated, does this make sense?
my script is...
$("div.arrows div").bind("mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});
Since you are not leaving the div the next mouseenter is not fired which will update the tooltip. Try to set the tooltip on slide change event if supported by the plugin you are using or click event of the prev/next buttons.
You will have to bind the updated html to the click event also then. This may work. Hard to tell without your html.
$("div.arrows div").bind("click, mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});
What does mouseover do and do you want it to change after a click on the next/prev button? I think you have to remove the inner HTML before appending new HTML. Maybe try to empty the element with .empty() and add a click event to catch that and call the function from there as well. Also try to log or alert some feedback to know when it does fire.
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...
});