Question

我有一个html和jQuery代码，其中动态创建了两个img，在ajax之后，我在图像上应用了单击事件，但是单击事件不起作用。表示它们什么也没显示。 imae是否被点击。我正在显示以下代码：-

<div id="images">
     <img id="image/5c07a4337c76881db6bf9a7f" src="data:image/jpeg;base64,/9j/4AA.....>
     <img id="image/5c07a4337c76881db6bf9a7d" src="data:image/jpeg;base64,/9j/4AA.....>
</div>


$( document ).ready(function() {
    $.ajax({
        url: "/api/v1/get-all-upload-image?sortBy=date",
        type: "GET",
        success: function(response){
            console.log(response);
            $.ajax({
                url : "/api/v1/base-strings",
                type:"GET",
                success:function(response){
                    console.log(response.response.data)
                    for (i= 0; i < response.response.data.length; i++){
                        console.log(response.response.data[i])
                        var base64_string = response.response.data[i].data;
                        var img = document.createElement("img");
                        img.setAttribute("id", "image/"+response.response.data[i].files_id);
                         img.setAttribute("onclick", "addListeners()");
                        // added `width` , `height` properties to `img` attributes
                        img.style.width ='340px';
                        img.style.height ='194px';
                        img.style.margin = '50px';
                        img.style.cursor = 'pointer';
                        img.src = "data:image/jpeg;base64," + base64_string;
                        var preview = document.getElementById("images");
                        preview.appendChild(img);
                    }
                }
            });
        }
    });
    function addListeners () {
        $('img[id^="image"]').on('click', function(){
          var val = $(this).attr('id').split('/');
          id= val[val.length - 1] 
        });
    }
    $('img[id^="image"]').click(function(){
        alert("hello")
    })
    $('img[id^="image"]').on('click', function(){
                        var val = $(this).attr('id').split('/');
                        id= val[val.length - 1] 
                    });
});

错误

未捕获的ReferenceError：未定义addListeners 在HTMLImageElement.onclick

代码为什么不起作用？

Answer 1

听我说的那样做。在您的第一个ajax调用之后粘贴以下代码：-

 $('body').on('click','img', function(){
         alert("I'm here");
  });

希望效果很好：）

为什么click事件在jQuery中不起作用？

1 个答案: