Develop Reference

Calling class attribute not working [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I want to create after every container a click function. It had worked but not anymore. When I want to create the event, he don't recognize the container because in debugger I can see he's going over the box of code.
// Decide list order, load the thumbnail for each publication.
var place = "first";
$('#archive').prepend('<div class="container" id="'+entry.publicationID+'"></div>');
$('.container:' + place).append('<div class="thumb"></div>');
$('.thumb:' + place).css("background-image", 'url(' + entry.thumbnailURL + ')');
$('.thumb:' + place).css("filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod="scale")');
$('.thumb:' + place).css("-ms-filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod="scale")');
// Load the publication title below each thumbnail.
$('.thumb:' + place).after('<div class="title"></div>');
$('.title:' + place).append(entry.publicationName);
// Load the publication startsdate & enddate.
$('.title:' + place).after('<div class="date"></div>');
$('.date:' + place).append(sdate + " tot " + edate);
// Set up publication links.
$('.container:' + place).click(function(){
loadPub(entry.publicationID, entry.publicationName);
setActive(entry.publicationID);
//Change css of current element
});

http://api.jquery.com/on/ this will help you. Basically attach the click on the outer container of the div or box you dynamically create and check the target which is done by "on" api in jQuery

If you are loading these elements dynamically, you'll want to use the .on and delegate events so that elements loaded after the DOM has loaded will know to attach click handlers.
Below is an example of me using the .on(). I declare my parent container in the selector and the specific elements I want to delegate event listeners to. In this case, I can specify the pseudo-class :first and jQuery is smart enough to know to only do it to the first element.
$(document).ready(function(e) {
for (var i = 0; i < 10; i++) {
$('#container').append('<div class="element">Element ' + i + '</div>');
}
$('#container').on('click', ':first', function(e) {
alert('hello! this should only work on the first element!');
});
});
.element {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

jquery - click on children not working if dynamically created [duplicate]

This question already has answers here:
jquery click event not firing on dynamically created div
(3 answers)
Closed 8 years ago.
I created a button tag inside my javascript
value = '<button id="structure_' + arrayCodStructure[j] + '" class="ui_btn" >' + arrayCodStructure[j] + ' </button><br></br>';
and then appended to an existing div this way:
$("#listContent").append(value);
My purpose is to get button's id when I click on the specific and tried the below code with no luck.
$("#listContent.ui_btn").bind("click".function() {
var id = $(this).Attr('id');
alert("id: " + id);
}
Any solution?
selector on #listContent works but it is not what I need.

Try to use event-delegation at this context and the selector that you have used is also wrong,
$("#listContent").on('click',".ui_btn" ,function() {
var id = this.id;
alert("id: " + id);
}

jQuery Selector equivalent of javascript

I am trying to get the jquery equvaliant of this javascript
var id = $(this).parent().parent().parent().attr("id");
document.getElementById(id).getElementsByClassName("addcomment")[0].style.display = 'block';
but its not working
$('#+id+' '.addcomment').css('display','block');
Any suggestions ?

$('#' + id + '.addcomment').css('display','block');
as a sidenote in the page you should have only one element with that id, so
$('#' + id ).css('display','block');
should works too (of course only if classname it's not necessary to target it, since this is a different selector)

$('.addcomment', '#' + id).css('display','block');
or just simple
$('#' + id).css('display','block');

I think you need to get the child elements based on their class. So try this.
$('#' + id ).find('.addcomment').show();

remove select, from cloned element [duplicate]

This question already has answers here:
How to remove the selected element during a clone() operation
(2 answers)
Closed 8 years ago.
I have this js code to add (clone) and delete an element.
$('#btnAdd1').click(function (event) {
var num = $('.linguas').length;
var newNum = new Number(num + 1);
var newElem = $('#input_' + num).clone(false).prop('id', 'input_' + newNum);
newElem.children(':text').val('');
$('#input_' + num).after(newElem).find('#input_' + num +'> option:selected').removeAttr("selected");
$('#btnDel1').prop('disabled', '');
if (newNum == 4) $('#btnAdd1').prop('disabled', 'disabled');
});
However, i want to remove the select="select" attribute, cloned from previous element.
I am trying something like this, but didn't work:
$('#input_' + num).after(newElem).find('#input_' + num +'> option:selected').removeAttr("selected");
demo here
thanks

Try this alone:
$('option:selected', newElem).prop("selected", false);
Your code:
$('#input_' + num).after(newElem).find('#input_' + num +'> option:selected').removeAttr("selected");
put the cloned select after the original, but then you searched for selected options using find on your original select. find searches children. The cloned select is now a sibling of the original not a child.

Apply alternate class on li with hidden li present in the list without using :visible

I have list of li which have some hidden li also. I am applying css class by using this method
function ArrangeAlternateRows() {
$('#' + firstContainer + ' li, #' + secondContainer + ' li').removeClass('AltRow');
$('#' + firstContainer + ' li:visible:odd').addClass('AltRow');
$('#' + secondContainer + ' li:visible:odd').addClass('AltRow');
$('#' + secondContainer + ' li input[type="text"]').css("width", "100%");
}
it works great but in IE-7 ":visible" is not working so i tried to use "not(:hidden)" that also not working.
Is there any alternate to apply css class on li without using ":visible" ?

You can still use a loop to directly assign a class to li.
If you do that you preserve also the compatibility with other browsers (like IE7)
Check : http://jsfiddle.net/b4zhs/2/

.invisibleItem
{
display:none;
}

while making an li visible/invisible add/remove a class, say visible-li
$('#' + firstContainer + ' li').show().toggleClass("visible-li");
$('#' + firstContainer + ' li').hide().toggleClass("visible-li");
So
$('#' + firstContainer + ' li.visible-li') // gives visible li elements inside firstContainer