将html插入到带有ajax的页面中后选择dom元素

Posted 2023-05-09

【中文标题】将html插入到带有ajax的页面中后选择dom元素

【英文标题】：selecting dom elements after html was inserted in a page with ajax

【发布时间】：2012-03-16 23:57:17

【问题描述】：

我创建了一个将 html 插入页面的 ajax 选项卡导航。代码如下所示：

$.ajax(
        type: 'POST',
        url: 'main/ajaxjson/load_course_details',
        data: page : which, course_id: id,
        success: function(home)

            $('#ajax-content ').hide();
            $('#ajax-content').empty().append(home);
            $('#ajax-content').fadeIn(); 
        

    );

好的...所以我将我的标记附加到我的 html 中。现在我需要从插入的 html 中选择 dom 元素，但我不能。我有以下代码：

<a href="javascript:;" class="light-button">Next</a>
<select id="chapters-select">
    <?php foreach ($chapters as $chapter) : ?>
    <option value="<?php echo $chapter->id; ?>"><?php echo $chapter->title; ?></option>
    <?php endforeach; ?>
</select>

这里我动态生成选择选项。当我尝试这样做时：

$('#chapters-select').change(function()
    alert('changed');
);

它不起作用。 通过 ajax 附加 html 后如何使用 javascript？

【问题讨论】：

对我来说似乎工作正常：jsfiddle.net/fyg6m你在哪里绑定事件处理程序？

@FelixKling。他写道，他正在使用ajax 添加内容，所以这一定是委托事件问题。

@gdoron：可能，但这意味着元素在通过 Ajax 插入之前 被选中，这与标题相反。不过，我同意你的看法。

为什么要打开和关闭 PHP 引擎？

【参考方案1】：

在 1.7+ 版本中使用像 on 这样的委托事件

$('body').on('change', '#chapters-select', function()
    alert('changed');
);

要提高性能而不是 body，您应该编写最接近的静态（未使用 ajax 或 javascript 添加动态）元素，该元素包含“chapters-select”

如果您使用的是旧版本的jQuery，请根据下表选择适当的方法：

$(selector).live(events, data, handler);                // jQuery 1.3+  
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+  
$(document).on(events, selector, data, handler);        // jQuery 1.7+  

ondocs:

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。 jQuery 将事件从事件目标冒泡到附加处理程序的元素（即从最内到最外的元素），并为匹配选择器的路径上的任何元素运行处理程序。

事件处理程序仅绑定到当前选定的元素；他们 在您的代码调用 .on() 时必须存在于页面上。 为了确保元素存在并且可以被选择，执行事件 绑定在文档就绪处理程序中的元素 页面上的 HTML 标记。如果新的 HTML 被注入到页面中， 在新的 HTML 之后选择元素并附加事件处理程序 放置在页面中。或者，使用委托事件附加事件 处理程序，如下所述。

【讨论】：

或者只是在$.ajax的回调中重新绑定事件处理程序。

谢谢。这是工作。我不明白为什么它以前不起作用，但我会研究它

@Treffynnon。通常最好只在一个地方做一次。

@Mythriel。阅读我添加和引用的文档，它应该回答你所有的问题和想法。

【参考方案2】：

在页面第一次加载后运行一次。

$("body").delegate('#chapters-select','change', function()
    alert('changed');
);

这相当于@gdoron 的回答，但兼容早于 1.7 的 jQuery 版本

【参考方案3】：

方法一。（使用ajaxStop）

声明一个全局变量var element;

在ajax成功方法中运行下面的代码

$(document).ajaxStop( function () 
     element = $('#ajax-element');
     element.css('border','1px solid red')
);

现在我们可以使用任何事件从任何地方全局操作元素

$('body').click(function (e)  
     element.css('background','seagreen');
);

方法2.（使用鼠标悬停）

在 ajax 成功方法中运行下面的代码。

设置带有 2px 边框的 ajax 加载元素。

 var flag = true;  // Flag just to run the code once
 $(document).on('mouseover', function () 
    var elem = $(document).find('#ajax-element');
    if(flag == true) 
       elem.css('border','2px solid red');
       flag = false;
    
 );

使用$(document).find('#ajax-element'); 查找和选择您的元素。

$(document).ajaxStop(function() ); -- 有效，但事件有时会运行 ajax 两次。在某些情况下可能很有用。

$(document).on('mouseenter',function() ); -- 可以工作，但在 ajax 调用后必须移动鼠标。

$("body").delegate("selector","click",function()); -- 有效，但在 ajax 调用后需要点击事件。

$(document).on('change','#ajax-element',function()); -- 对我不起作用。

$('#ajax-element').change(function()); -- 不起作用。

$('#ajax-element').click(function()); -- 不起作用。