Question

正如我在jQuery中发现的Ajax，加载的元素不是jQuery对象。 “重新扫描”文档以使元素加载Ajax jQuery对象的最佳方法是什么？

在下面的代码jq('.storyBlock button').click(function()中，其他函数不会在加载的Ajax html上触发。如何最好地更改此代码以便它们可以触发？

var jq = jQuery.noConflict();

jq(document).ready(function() {
    // Disable buttons after clicking
    jq('.storyBlock button').click(function() {
        jq(this).addClass('selected');
        jq(this).parent().addClass('disabled');
        jq(this).parent().find('button').attr('disabled', true);
    });
    // Event Handler
    jq('.storyBlock button').click(function() {
        // Find link
        var getID = jq(this).data('link');
        console.log(getID + '.html');

        // Load file and insert after last story
        jq.ajax(getID + '.html').done(function(html) {
        jq('#stories > div:last-child').after(html);
        if ( (getID) != 'start' ) {
            jq('html,body').animate({ scrollTop: jq('#' + getID).offset().top },'slow');
        } else {
            jq('.storyBlock').remove();
            jq('#stories > div' ).load( "start.html" );
            jq('html,body').animate({ scrollTop: jq('#start').offset().top },'slow');
        }
       });
    });
});

Answer 1

您需要使用event delegation，因为您需要处理动态元素

将事件处理程序转换为

jq(document).on('click', '.storyBlock button', function() {
})

使加载的元素成为jQuery对象

1 个答案: