Why can't Jquery access an imported element on my page

Question

I have a change that lists records from a database, my main page uses a second page to load information from it. I want the user to be able to click an 'x' and be able to delete the record.

So i have my main page 'index.php' and i have the loader page that is called 'get_results.php'

So when i load index.php, the JS loads and then goes to get_results.php and then displays the output on the screen, however, when i click the 'x' to try and delete a section it doesn't work. To add to that, i have run the JS script on the get_result.php page and the deleting works just fine.

I can't figure out how to get around this, i assume that it's because the new data (get_results) is being loaded after the index.php document is loaded.

I thought about changing when this data is load but i will still have the same problem because users can click a button and it gets rid of the data and puts new data there.

When the doc is read i run this:

$(".search_results_container").load("get_results.php?service_type=auto #results_output");

This loads the new data into it's container.

Then when the clicks the X it should run this code:

$(".delete_result").on("click", function( e ){
    e.preventDefault();

    var result_id = $(this).data("delete-id");

    // post data to delete page
    $.post("delete_results.php?action=delete&result_id=" + result_id, function( data ){
        // Out delete data
        console.log(data);
       // Refresh list
    } );

});

And this is the HTML that is being loaded into the container

<ul class="data_list" id="result_list">
<li>
    <div class="result_info">
        <a href="?action=edit_result&result_id=5" class="update_links">
            <h2>
                Test data 1
                <small>Testing</small>
            </h2>
        </a>
    </div>
    <div class="result_delete_icon">
        <a href="?result_id=5&action=delete" class="delete_result" data-delete-id="5">
            <i class="fa fa-times" style="float: right;"></i>
        </a>    
    </div>
</li>
<div class="result_info">
        <a href="?action=edit_result&result_id=5" class="update_links">
            <h2>
                Test data 1
                <small>Testing</small>
            </h2>
        </a>
    </div>
    <div class="result_delete_icon">
        <a href="?result_id=5&action=delete" class="delete_result" data-delete-id="5">
            <i class="fa fa-times" style="float: right;"></i>
        </a>    
    </div>  
</li>

I really don't know how to get this working, i'm thinking maybe something needs to be refreshed because it seems like Jquery isn't finding the elements in the dom, but i thought that if i reference the element each time, instead of storing it in a var it would walk through the DOM again to get it.

Answer 1

This isn't doing what you think it's doing:

$(".delete_result").on("click", function( e ){

This is invoking the selector ".delete_result" once , identifying the elements which exist at that time , and attaching the click handler to those elements. Handlers are attached to elements , not to selectors . So any elements added to the page after this code executes won't have click handlers attached to them.

Instead, you're looking to do this:

$(document).on("click", ".delete_result", function( e ){

This still executes only once , but attaches the handler to document (which is unchanging during the life of the DOM). Indeed, any common unchanging parent element in the hierarchy will work in place of document . The second selector, ".delete_result" , is used on each event to filter events from selected child elements. Thus, any element added to the document later in the life of the DOM will still "bubble up" its click event to document and be identified by that second selector.

For more examples and information, I've written about this before .

Answer 2

您需要delegate事件http://learn.jquery.com/events/event-delegation/

$(document).on("click", ".delete_result",function( e ){...