We Keep Coding

jquery - unable to invoke function for dynamically created elements

I have a pagination ajax function displayed below:
$.fn.ajaxPagination = function() {
return this.unbind('click').on('click', function(e) {
e.preventDefault();
//alert();return;
if (!$(this).parent().hasClass('disabled')) {
var href = $(this).attr('href');
var wrapper = $(this).closest('.content-wrapper');
wrapper.addClass('loader-bg');
$.post(href + '&ajax=1', function(response) {
wrapper.removeClass('loader-bg');
wrapper.html(response);
sig.init();
return false;
});
} else {
return false;
}
});
};
I invoke it using the code:
$('.pagination > li > a').ajaxPagination();
Sometimes the anchor links are displayed from the result of ajax. So they become dynamically created elements. I am not able to invoke this function due to the dynamic creation of these anchor tags. I know how to solve this case if it was a click or any other event. But this is the invokation of a function. How to solve this issue? Any ideas are welcome. :)

I advise you to use event delegation. see https://learn.jquery.com/events/event-delegation/
You should bind click on a parent element containing all you dynamically created anchors, matching a selector, and you do not have to bother about adding the click event to the dynamically created elements.

Problems onclick function on child button

I am trying to create a table, made with buttons, that allow me to get into a Geological Time Chart. I create 4 buttons with class "levels" and then I execute a function that return the childs from an API.
The point is that the function works the first time, but then it stop working for the new created buttons. Here is my code:
$(".levels").click(function clickLevel(){
var buttonName = $(this).text();
console.log($(this).text());
$.each(JsonObject, function(index,value){
if (buttonName == value.nam){
lvloid = value.oid;
console.log(lvloid);
}
if(lvloid == value.pid){
console.log(lvloid == value.pid);
var button = "<button class=\"btn-flat levels\" style=\"background-color:"+value.col+";\">"+value.nam+"</button>";
$(".conti").append(button);
}
});
});
I guess the problem is that I am creating the class within the function, but I don't find any other solution (I tried to declare the function and then call it in the .click event, but this don't even work!).
Thank you to all of you!!

Instead of :
$(".levels").click()
Use
$(document).on('click', '.levels', function(){
});
The reason behind this is, $(".levels").click() searches in the static dom, and you are generating the button dynamically. For dynamic content $(document).on() is used.

Use
$(".levels").on('click', function(){
});
instead of
$(".levels").click(function clickLevel(){
});

Can we set attribute 'id' to different 'buttons' via loop using javascript or jquery?

I want to achieve the following:
Let say I have ten buttons on my page, and they all are dynamically generated. I have added ID to all of these ten buttons, say id be 1,2,3....10. using the following code.
function createButton(id){
button.setAttribute("name", id);
}
Now I want to add 'onlick' event to all these button, like this
function abc()
$(document).on('click','#1', function(){
callSomeFunc();
});
This way I'll have to write the above code 10 times with different Id's. I tried to use loop over the function as
function abc()
for(var i=1, i<=10, i++){
$(document).on('click',id, function(){
callSomeFunc(id);
});
}
to no avail ! How can I achieve this ?

There is no need to wrap your click event in a function. You can simply have it listening for a click event. And since each id is calling the same function, you can generalize it by a className rather than the specific ID:
$(document).on('click', 'div', function() {
callSomeFunc();
});
Codepen Example
And to get the id value, you can use this.id:
$(document).on('click', 'div', function() {
callSomeFunc(this.id)
});
ID Example

The immediate fix for your function, sticking to the way you are trying to do it, is to do the following:
function abc()
for(var i=1, i<=10, i++){
$(document).on('click','#' + i, function(){
id = $(this).prop('id');
callSomeFunc(id);
});
}
Note I've added '#' explicitly and am referring to your index counter not 'id' in the intial selector.
I would recommend some refinements, however. You can always avoid the $(document) clunkiness:
function abc()
for(var i=1, i<=10, i++){
$('#' + i).click(function(){
id = $(this).prop('id');
callSomeFunc(id);
});
}
Further is there a reason you are using ID's? If you set up a common class you could do this all in one fell swoop! Plus if you are using id to give different behaviour for different buttons, you could just do that within the event handler using $(this)
//This will apply the click handler to every element that has class="someClass"
$('.someClass').click(function(){
//Do stuff with $($this)
});

KnockoutJS: Checkbox Inside Click-Bound Anchor-Tag not Selectable

I am trying to bind checked on a checkbox input which resides inside an anchor tag which, itself, is click bound.
Whilst I am aware that this may not be entirely valid (interactive content may not be descendant of anchor-tags), I would still like to get it to work as intended - even if just to understand it.
Currently, only the outside click event is handled and the click never arrives at my checkbox.
An example of what I am trying to achieve is here: http://jsfiddle.net/fzmppu93/2/
Having had a look through the KnockoutJS documentation, I tried clickBubble: true on the anchor-tag's click binding - to no avail.
The use case, if you're interested, is an unordered list containing links - each of these "links" contains information on a TV show: title, actors, image, synopsis. The show is selectable, but there are also 'quick-actions' to mark it as seen, star it, and so forth.
Is there another way of making a checkbox work inside an anchor-tag?

I have written a custom binding handler that is similar to "clickBubble", however mines allows to you to prevent the propagation of any event.
Here is the binding handler:
ko.bindingHandlers.preventBubble = {
init: function (element, valueAccessor) {
var eventName = ko.utils.unwrapObservable(valueAccessor());
var arr = eventName;
if (!eventName.pop) {
arr = [arr];
}
for (var p in arr) {
ko.utils.registerEventHandler(element, arr[p], function (event) {
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
});
}
}
};
And here is a working fiddle of your example.

Focus out of a div but not if a div was pressed - Jquery

I have a unique situation here that I am trying to figure out. Here is what I am doing:
$( ".add-user-group" )
.focusout(function(e) {
$(this).parent().find(".search-overhang").hide();
})
.focus(function() {
$(this).parent().find(".search-overhang").show();
});
I am listening for when this input is selected to show a results container that is populated with a server call using ajax Now within that ajax call I am populating data using:
dataSent.parent().find(".search-overhang").html('');
for(var i = 0; i < data.data_retrieved.length; i++)
{
dataSent.parent().find(".search-overhang").append("<span class='overhang-data'><span>"+data.data_retrieved[i].display_name+"</span><br/><span class='bottom-inside-overhang-data'>"+data.data_retrieved[i].user_email+"</span></span>");
}
$(".overhang-data").on('click',function(event){
event.stopPropagation();
});
Now you will notice I have a on click that should override the focusout on the add-user-group. But this is not the case. Before it has a chance to do so it stops because I stop the event action using the focusout. What I am trying to figure out is how can I override this, even with my data being dynamically populated? Note one thing: add-user-group is loaded server side before page loads.
Suggestions, thoughts?

After looking further I found a quick solution:
var clicked = '';
$(document).on('mousedown',function(event){
clicked = $(event.target).attr("class");
});
..
.focusout(function(event) {
if(clicked !== "overhang-data")
{
$(this).parent().find(".search-overhang").hide();
}
})..
I am just listening on a global scale for what is clicked and storing that into a variable so when I need to check on the focusout I can verify if it is the corresponding class.