使用jQuery库将Click事件附加到DIV

Question

I am aware I can use the click function to attach an event to the DIV element but for some reason it is not working for me. Here is how I am creating the DIV element.

function createColorSwatchDiv(color) {

    var colorSwatchDiv = $("<div>");

    var image = $("<img>");
    image.attr("src",color.imageURL);

    var label = $("<label>");
    label.text(color.title);

    colorSwatchDiv.append(image);

    return colorSwatchDiv;

}

Then I try to attach the click event like the following:

   // run a loop and build the grid layout
    for(index = 0; index < colors.length; index++) {

        var colorSwatchDiv = createColorSwatchDiv(colors[index]);

        // attach the event
        colorSwatchDiv.click(function(){

                alert('hello world');

        });

        colorsSection.append(colorSwatchDiv);

    }

    // add to the dom
    $("#color .imageChartOption").after(colorsSection);

But it does not work and no click event is been attached.

Answer 1

following is the code

 var $newdiv1 = $("<div id='object1' onClick=Test()>Hello</div>");

 $("body").append($newdiv1);


function Test()
{
    alert("Clicked");
}

OR

  $newdiv1.on('click',function(){alert("hello");});

Answer 2

由于您已经在jQuery包装器中创建了div，因此无需在这里再次包装$(colorSwatchDiv).click(... 。此外，您确定colorSwatchDiv变量引用的是dom元素，而不是内存中的对象。您可以在dom的榆树上上课吗？