jQuery .load()使内容在加载后不可点击 [英] JQuery .load() makes content not clickable after load

问题描述

我有一个页面，其中有一个div.该div的内容由一个include页面填充，并且include页面正在调用数据库以检索内容.

I have a page in which I have a div. The content from that div is being populated by an includes page, and that includes page is making a call to a database to retrieve content.

当用户单击添加任务"按钮时，将进行ajax调用以将内容插入数据库，并使用.load()刷新显示所有任务的div. 删除任务"的过程相同.进行了另一个ajax调用，该操作从数据库中删除了一行，并使用.load()刷新了div.

When a user clicks an 'add task' button, an ajax call is made to insert content into a database and the div that shows all tasks is refreshed with .load(). The same process happens for 'remove task'; another ajax call is made that deletes a row from a adatabase and the div is refreshed using .load().

我在数据库表中看到了插入和删除，但是前端有点笨拙.当页面首次加载时，我可以执行无限数量的添加"操作，并且所有新任务都会显示在div中.但是，我只能执行一个删除"操作.第一次尝试后，我似乎无法从div中选择一个元素.

I am seeing the insertions and deletions in my database table, but the front-end is a little wonky. When the page first loads I can perform an unlimited number of 'add' actions and all new tasks show up in the div. However, I can only do one 'delete' action; after the first try, I just can't seem to select an element from the div.

这是添加"代码:

$("#accept_new_task").click(function(){
    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, add a new item to task list and clear input
        function(data) {

            //Clear input
            $("#new_task_name").val('');
            $("#new_task_description").val('');

            //Show new task
            $('#newly_added_tasks').load('[page on server]', function() {
            });             



        });

    jQuery.ajaxSetup({async: true});    
});

和删除"代码:

//Deletes recently added task
$(".newtask").click(function(){
    alert('!');  //to test
    var val = $(this).attr('value');

    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, refresh div 
        function(data) {
            $('#newly_added_tasks').load('[page on server]', function() {
                alert('Load was performed.');
            });                             
        });     

    jQuery.ajaxSetup({async: true});  

});

正在加载的内容是一个表，该表是使用从数据库调用中提取的内容生成的.这是一个片段:

The content that is being loaded is a table generated with content extracted from a database call. Here's a snippet:

<td>'.$task[$i]['name'].'</td>
<td>'.$task[$i]['description'].'</td>
<td><input type="button" class="newtask" name="accept_new_task" id="task_'.$task[$i]['task_id'].'" value="'.$task[$i]['task_id'].'"></td>

任何帮助将不胜感激.

推荐答案

jQuery .click事件不是实时事件，因此它将仅使已分配给click的项目成为可单击事件.一旦这些项目被刷新，移除或引入了新项目，刷新的项目将不会具有click事件，而新项目将不会具有click事件.

The jQuery .click event is not a live event, so it will only make items it has been assigned to clickable. Once those items are refreshed, removed or new items come in, the refreshed items won't have the click event and new items won't have the click event.

您将要使用 jQuery .on 事件，它是.的替代.现场直播.这样，当内容刷新时，它们仍然会附加一个click事件.

You'll want to use the jQuery .on event, which is the replacement for the .live event. That way when the contents refresh, they'll still have a click event attached.

另一种选择是每当内容刷新时分配点击事件.

The other option is to assign the click event whenever the content refreshes.

这篇关于jQuery .load()使内容在加载后不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！