Question

我使用json创建了一个动态的页面列表，并将它们输出到a。由for循环创建的元素似乎无法被JS或CSS读取。例如，作为for循环一部分的所有链接都应该通过jquery-ui转换为按钮，但不是。对话框似乎在JS Fiddle中起作用。现在我试图使用.live仍然没有运气。现在尝试使用仍然相同的结果。这似乎是一个DOM问题任何帮助将不胜感激:)。

jsfiddle链接

http://jsfiddle.net/#&togetherjs=3QRhR6vf5i

href就是这样设置的

<a id="delete" class="ui-button-text" href="function/variable">Delete</a>

default.js

$(document).ready(function () {
$(function () {
    $.getJSON('webpages/json_data', function (o) {

        for (var i = 0; i < o.length; i++) {
            $('#contentList').append('<div class="contentBox ui-widget-content"><div class="cHeader">' + o[i].page_headline + '</div><div class="cOption"><a href="create/' + o[i].id + '" class="ui-button-text">Edit</a></div><div class="cOption"><a class="ui-button-text" rel="' + o[i].id + '" id="delete" href="json_del">Delete</a></div></div>');
        }
    });

    $("#dialog-confirm").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        height: 180
    });

    $("#delete").on("click", "a", function (event) {
        event.preventDefault();
        var targetUrl = $(this).attr("href");
        var id = $(this).attr("rel");
        var delItem = $(this).parent().parent();
        $("#dialog-confirm").dialog({
            buttons: {
                "Confirm": function () {
                    $.ajax({
                        type: "GET",
                        url: href,
                        data: "id=" + id,
                        dataType: "json",
                        success: function () {
                            delItem.remove();
                        }
                    });
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#dialog-confirm").dialog("open");
    });
});
});

对话框的确认

<div id="dialog-confirm" title="Delete site page?">
 <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">  </span>
 This item will be permanently deleted and cannot be recovered. Are you sure?</p>
 </div>`

网页控制器

function json_del()
{
    $id = $this->uri->segment(3);
    $delete = $this->_delete($id);
}

function _delete($id)
{
    $this->load->model('mdl_webpages');
    $this->mdl_webpages->_delete($id);
}

网页模型

function _delete($id)
{
    $table = $this->get_table();
    $this->db->where('id', $id);
    $this->db->delete($table);
}

Answer 1

你的问题是在DOM准备好之前调用的js脚本。请把JS代码包装进

$(document).ready(function(){

// your code

})

Answer 2

经过一些睡眠和一些研究后，我需要设置课程，然后给他们打电话。

default.js

$(document).ready(function () {
$(function () {

    $("#dialog-confirm").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        height: 300
    });

    $(".delete").click(function (event) {
        event.preventDefault();
        var targetUrl = $(this).attr("href");
        var id = $(this).attr("rel");
        var delItem = $(this).parent().parent();
        $("#dialog-confirm").dialog({
            buttons: {
                "Confirm": function () {
                    $.ajax({
                        type: "GET",
                        url: targetUrl,
                        data: "id=" + id,
                        dataType: "json",
                        success: function () {
                            delItem.remove();
                        }
                    });
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#dialog-confirm").dialog("open");
    });

    // setter
    var disabled = $( ".disabled" ).button( "option", "disabled" );
    var delicons = $( ".delete" ).button( "option", "icons" );
    var editicons = $( ".edit" ).button( "option", "icons" );
    var deltext = $( ".delete" ).button( "option", "text" );
    var editext = $( ".edit" ).button( "option", "text" );

    // getter
    $( ".disabled" ).button( "option", "disabled", true );
    $( ".delete" ).button( "option", "icons", { primary: "ui-icon-trash", secondary: null } );
    $( ".edit" ).button( "option", "icons", { primary: "ui-icon-pencil", secondary: null } );
    $( ".delete" ).button( "option", "text", false );
    $( ".edit" ).button( "option", "text", false );
});
});

元素未被阅读

2 个答案: