jQuery的不工作的jQuery创建的元素 [英] jQuery not working on elements created by jQuery

问题描述

我通过动态地被称为每秒Ajax调用添加列表项到jQuery的列表。

I am dynamically adding list items to a list in jQuery through an ajax call that is called every second.

下面是code的Ajax调用。

Below is the code for the ajax call.

$.ajax({
    url: 'php/update_group_list.php',
    data: '', 
    dataType: 'json',
    success: function(data) {
        var id = data.instructor_id;
            group_cnt = data.group_cnt,
            group_name = data.group_name,
            group_code = data.group_code;

            for (i = current_row; i < group_cnt; i++)
            {
                //setInterval(function() { $('#group-list-div').load('php/group_list.php'); }, 5000);

                $('#group-list').append("<li><a href='#' data-role='button' class='view-group-btns' id='"+group_code[i]+"' value='"+id+"' text='"+group_name[i]+"'>"+group_name[i]+"</a></li>");
                $('#delete-group-list').append("<fieldset data-role='controlgroup data-iconpos='right'>" +
                                                    "<input id='"+group_code[i]+i+"' value='"+group_code[i]+"' type='checkbox' name='groups[]'>" +
                                                    "<label for='"+group_code[i]+i+"'>"+group_name[i]+"</label>" +
                                                "</fieldset>");
            }

            current_row = i; 

            $('#group-list').listview('refresh');
            $('#delete-group-list').trigger('create');
    }
});

现在我有两个问题。

第一个问题：

当我尝试运行code以下（它应该显示一个警告框，如果有这一行$创建列表中的项目（'＃组列表）。等等...等等，在code以上），没有任何反应。

When I try to run the code below (it should show an alert box if any of the list items created in this line $('#group-list').blah...blah in the code above), nothing happens.

$(".view-group-btns").click(function() 
{
    alert("check");
});

第二个问题：

SECOND PROBLEM:

此外，当我尝试发送表单数据的复选框（参考线$（'＃删除组列表）。等等...等等，在Ajax调用code以上）后返回错误意外的标记＆LT;

Also when I try to send the form data for the checkboxes (referencing line $('#delete-group-list').blah...blah in the ajax call code above) the post returns the error unexpected token <

我是什么做错了吗？我认为这两个问题是相关的，因为我创建动态使用的列表项。

What am I doing wrong? I think the two problems are related as I am creating the list items that are used dynamically.

下面是关于第二个问题，额外的code

Here is extra code relating to the SECOND problem

HTML：

<form id='delete-group-form' action='php/delete_groups.php' method='post'>
    <h3 style='text-align: center;'>Check the Box Beside the Groups you Would Like to Delete </h3>
    <div style='margin-top: 20px;'></div>
        <div id='delete-group-list'>
        </div>
    <div style='margin-top: 20px;'></div>
    <input type='submit' id='delete-groups-btn' data-theme='b' value='Delete Groups(s)'>                    
</form>

JS code

JS Code

$('#delete-group-form').submit(function(e) 
{
    e.preventDefault();

    alert($('#delete-group-form').serialize());

    if ($('#delete-group-form').serialize() == "") 
    {
        alert('No groups selected to be deleted.')
        return false;
    }
    else 
        if ($('#delete-groups-form').serialize() == null) 
        {
            alert('No groups selected to be deleted.')
            return false;
        } 
        else 
        {
            $.post('php/delete_groups.php',$('#delete-groups-form').serialize()).done(function(data) 
            {
                obj = jQuery.parseJSON(data);


                var group_codes = obj.group_list;

                alert(group_codes);

                alert("The selected groups have been deleted");
                window.setTimeout(2000);
                return false;
            });
        }
    return false;
});

delete_groups.php

delete_groups.php

<?php 
    $group_codes = $_POST['groups'];    
    $items = array('group_list'=>$group_codes); //creating an array of data to be sent back to js file
    echo json_encode($items); //sending data back through json encoding
?>

我觉得第二个问题的根源是行$ GROUP_ codeS = $ _ POST ['团体']; specfically的$ _ POST ['团体']，因为当我用$ GROUP_ codeS =测试取代它; （只用于调试），在code正常工作。

I think the root of the SECOND problem is the line $group_codes = $_POST['groups']; specfically the $_POST['groups'] because when I replace it with $group_codes = 'test'; (just for debugging purposes) , the code works as expected.

推荐答案

您需要使用事件委派，让您的新创建的元素正常运行：

You need to use event delegation to make your newly-created elements function properly:

$("#group-list").on("click", ".view-group-btns", function() {
    alert("check");
});

这篇关于jQuery的不工作的jQuery创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！