how can I access a css class from the appended html div?


Tags: javascript,jquery,html,css

Problem :

How can I access a css class created by jquery's append. I tried the following code with a click listener on my class I want to access in the div but the event is not being picked up. Thank you

$.each(items, function(i, item) {
  ids.push(item.clientName);
  $("#bookedAds").append("<div class='alert alert-info' role='alert'>"+

    item.clientName+" <button name=' "+item.clientName +
    "' class='btn quickview' id='quickview' adSize ='"+item.adSize +
    "'>Quick View</button></div>"
    ); 

});
//Below is my on click Listener
   $(".quickview").click(function(){

  alert("This is not popping up :(");
});


Solution :

To trigger your event on dynamically created elements you need to use event delegation.

you can try updating your code like this

$(document).on('click', '.quickview', function(){ 
    alert("This is popping up :)");
});

hope this helps.


    CSS Howto..

    How to make a CSS rule act differently inside another div tag?

    CSS: How the backgrounds can extend the border and overlap?

    960 grid css : How do I change vertical padding between divs?

    How to align text and image in xslt with css

    How to horizontally center align this absolutely positioned `` tag inside the relatively positioned div?

    How to make an image hover over another?

    How to give style (image) for browse button in CSS?

    How to prevent randomly positioned images from overlapping using Angular

    CSS float: how to form the second row based on tallest DIV?

    How to apply a sifr rule to a hyperlink and also its a.active counterpart

    How can I remove the underline of a linked image in Firefox and Chrome?

    how do I align my error message with Simple_form for Ruby on Rails?

    How to add vertical scrolling to Windows 8 app in snapped view

    How to switch tabs and change css class on click using Angular2?

    How to Get Multiple elements to change color on hover CSS?

    How do I make an `hr` with repeating small images?

    How important are HTML/CSS validation errors like s inside

    s? [duplicate]

    Flexbox: how to get divs to fill up 100% of the container width without wrapping?

    How to style an embedded jsp inside another jsp?

    css - how to stretch and auto-resize background image

    How to override PrimeFace CSS to customize my button?

    How to apply CSS style which will be ignored for tfoot or last TR

    how to swap div with one another in mobile view css

    how to set icon and text inline on header of in phonegap app?

    Showing HTML page with CSS attached in a WebView

    How to deal with DIV position and height

    How to convert html & css to an image?

    LESS: How to specify current tag with nesting?

    How do I create tabs in vertical alignment?

    How to Make Tabs In CSS?