Question

我正在构建一个带有一些jQuery前端函数的webpart，它们执行一些基本的表单函数，但无法找到代码中断的位置。基本上当用户点击保留预订的链接时，弹出jQuery Dialog并用设备名称填充复选框行。 bunsen burner，每行还有2个下拉列表，允许客户端选择多少项，如果是个人或组，则复选框将所选行从禁用更改为启用。

发生的事情是禁用/启用行在第一次之后并不总是有效。当对话框关闭时，代码将被删除，因此每个新对话框都会打开表单，完全没有来自最后一个的任何残留代码，所以总是一个新的表单。复选框更改检测使用.live（“更改”，我已经实现了很多次，但没有失败，但由于某种原因，我的代码在第二次和后续尝试时失败。所以它必须在第一个表单关闭后或作为新的一个人填充并显示。

我使用的是jquery-1.7.1，对话库是jquery-ui-1.8.16自定义构建的webparts。所有jquery代码都从$（document）.ready状态运行。

3个功能

$(".bookingFunctions")是链接点击。
$("input:checkbox").live("change")是行启用/禁用
$(".cancel").live("click")正是我要关闭表单并从DOM中删除代码

填充表单对象的示例

我的代码如下：

    var $subInfo = null;
    var id = null;

// Open and Load the equipment list dialog
$(".bookingFunctions").live("click", function () {

    id = $(this).find(".itemId").text().trim();
    var name = $(this).find(".itemClassName").text();
    var inquiry = $(this).find("#itemInquiryName_" + id).text();

    $subInfo = $("<div id='equipmentList_" + id + "' class='equipmentList'></div>").dialog({ title: name + " Equipment List for " + inquiry, autoOpen: false, modal: true });
    $subInfo.html("<img src='/_layouts/Images/BGS.Booking.SharePoint/ajax-loader.gif' alt=''/>");

    $.post("/_layouts/BGS.Booking.SharePoint/requestHandler.ashx",
        {
            func: "getEquipList",
            bid: id
        }, function (data) {
            $subInfo.html(data);
        });

    $subInfo.dialog("option", "width", 660);
    $subInfo.dialog("option", "height", 520);
    $subInfo.dialog('open');

    // do live bind for change events on form
    SetLiveChangeForCheckboxes();

    //return false;

});
// Manage the dropdownlists associated with each checkbox (disable/enable)
$("input:checkbox").live("change", function () {
    var id = $(this).attr("id").substr(4);

    if ($(this).attr("checked")) {
        $("#numOf_" + id).removeAttr("disabled");
        $("#listType_" + id).removeAttr("disabled");
    }
    else {
        $("#numOf_" + id).attr("disabled", "disabled");
        $("#listType_" + id).attr("disabled", "disabled");
    }
});
$(".cancel").live("click", function () {
    $subInfo.dialog('close');
    $(".equipmentList").remove();
});

- 对话样本

<ul xmlns="http://www.w3.org/1999/xhtml" id="equipmentList">
    <li class="equipItem" id="item_10">
        <input type="checkbox" checked="checked" class="checkboxList" id="chk_10"/> 100 mL beaker
        <select class="listType" id="listType_10">
            <option value="x">Choose</option>
            <option value="1">Class</option>
            <option selected="" value="2">Group</option>
            <option value="3">Individual</option>

        </select>
        <img alt="" src="/_layouts/Images/BGS.Booking.SharePoint/per.png?p=0" class="fr"/>                                                   
        <select class="numOf" id="numOf_10">
            <option value="1">0</option>
            <option value="2">1</option>
            <option selected="" value="3">2</option>
            <option value="4">3</option>
            <option value="5">4</option>
            <option value="6">5</option>
            <option value="7">6</option>

            <option value="8">7</option>
            <option value="9">8</option>
            <option value="10">9</option>
            <option value="11">10</option>
            <option value="12">11</option>
            <option value="13">12</option>
            <option value="14">13</option>
            <option value="15">14</option>
            <option value="16">15</option>

            <option value="17">18</option>
            <option value="18">19</option>
            <option value="19">20</option>
            <option value="20">21</option>

        </select>
    </li>
    <li class="equipItem" id="item_35">
        <input type="checkbox" class="checkboxList" id="chk_35"/> 100 mL measuring cylinder
        <select disabled="disabled" class="listType" id="listType_35">
            <option value="x">Choose</option>

            <option value="1">Class</option>
            <option value="2">Group</option>
            <option value="3">Individual</option>

        </select>
        <img alt="" src="/_layouts/Images/BGS.Booking.SharePoint/per.png?p=0" class="fr"/>
        <select disabled="disabled" class="numOf" id="numOf_35">
            <option value="1">0</option>
            <option value="2">1</option>

            <option value="3">2</option>
            <option value="4">3</option>
            <option value="5">4</option>
            <option value="6">5</option>
            <option value="7">6</option>
            <option value="8">7</option>
            <option value="9">8</option>
            <option value="10">9</option>
            <option value="11">10</option>

            <option value="12">11</option>
            <option value="13">12</option>
            <option value="14">13</option>
            <option value="15">14</option>
            <option value="16">15</option>
            <option value="17">18</option>
            <option value="18">19</option>
            <option value="19">20</option>
            <option value="20">21</option>

        </select>
    </li>
    <img alt="Cancel" src="/_layouts/Images/BGS.Booking.SharePoint/cancel.png" class="cancel fr"/>
    <img alt="Save" src="/_layouts/Images/BGS.Booking.SharePoint/save.png" class="save fr"/>
</ul>

Answer 1

在DOM准备好之后填充某些内容的事实不是使用.live的标准，它完全是关于事件处理程序，而不是内容。似乎没有充分的理由使用它。

每次需要时，似乎没有充分的理由创建新的对话框。

建立单个对话框并重复使用它更为常见 - 只需将结构和事件处理程序保留在原位，然后更改内容即可。我无法想象这不应该起作用的情况。

Answer 2

事实证明问题是.removeAttr（“禁用”）功能，由于某种原因，在第一个表格关闭后它不会触发除去。我还没有解决这个问题！

尝试：

$('selector').attr("disabled", false);

而不是removeAttr()。

jQuery live（“点击”...在将新数据重新加载到jQuery Dialog时失败

2 个答案: