Question

我使用AJAX调用的类创建了元素。我正在尝试将click事件绑定到这些创建的对象。

当我创建一个与AJAX创建元素具有相同处理程序类的元素时，它会很好地绑定。但是当处理程序元素是从AJAX调用创建的时，它们不会绑定到.click函数。

我认为它与加载元素时有关。我是否需要.click()函数的承诺声明？

如果需要，你这是我的代码。

创建元素

function runQuery(){

var url = 'http://www.nexthometown.com/index.php?option=com_singleprop&view=raw&format=raw';

$.ajax({
    url: url,
    dataType: 'json',
    success: function(data){ 
        $.each(data, function (key, value){
            var agentuid = value[0];
            var mlsnum = value[1];
            var address = value[5] + ' ' + value[6] + ' ' + value[7];
            var city = value[9];
            var state = value[10];
            var zip = value[11];
            $('#ohs_table').append('<tr><td>' + mlsnum + '</td><td>' + address + ' ' + city + ' ' + zip + '</td><td><div class="media_button">QRCode</div><div class="f_button media_button" value="' + mlsnum + '">Flyer</div></td></tr>');
        });
    },
    error: function(jqXHR, error, errorThrown) {  
        alert(jqXHR.responseText); 
    }
});


};

.click功能

$('.f_button').click(function(){
    $('#test').html('<h1>Hello!</h1>');
});

Answer 1

$('.f_button')会在您调用选择器时返回存在的元素集合。它不会考虑新元素。

使用.on()的事件委派语法，并将click事件附加到已存在的父元素：

$('#ohs_table').on('click', '.f_button', function(){ $('#test').html('<h1>Hello!</h1>'); });

由AJAX加载的元素成功不响应.click函数

1 个答案: