在html插入到带有ajax的页面之后选择dom元素 [英] selecting dom elements after html was inserted in a page with ajax

问题描述

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

I created an ajax tab navigation with html being inserted into the page. the code looks like this:

$.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元素，但是我不能。我有以下代码：

ok...so I append my markup into my html. Now I need to select dom elements from the inserted html, but I can not. I have the following code:

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

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

Here I generate the select options dynamically. When I try to do this:

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

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

it doesn't work. How can I use javascript after I append the html via ajax ?

推荐答案

使用代理事件，如 on for 1.7 +

Use delegate event like on for version 1.7+

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

为了提高性能，而不是 body 写最接近的静态（不添加动态与ajax或javascript）元素，保存章节选择

To increase performance instead of body you should write the closest static(Not added dynamic with ajax or javascript) element that holds "chapters-select

如果你正在使用较旧版本的 jQuery 选择适当的方法与下表：

If you are using older version of jQuery choose the appropriate method with the following table:

$(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+  

< c> c> docs：

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

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

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

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

这篇关于在html插入到带有ajax的页面之后选择dom元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！