Question

我创建了一个ajax标签导航，其中html被插入到页面中。代码如下所示：

$.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？

Answer 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+

on docs:

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

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

Answer 2

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

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

它相当于@ gdoron的答案，但与早于1.7的jQuery版本兼容

Answer 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(){}); -- 不起作用。

在使用ajax的页面中插入html后选择dom元素

3 个答案: