Question

测试Jquery UI而不是享受它。

此http://jsfiddle.net/FhjQy/4/是复制，粘贴和（删除个人详细信息）。

请告诉我为什么在点击拒绝图像时页面会闪烁。这是为了调出我的模态表单对话框!!!

HTML：

<div id="comments_dialog" title="Reject an event">
        <form name="commentsForm" action="#" method="POST">
            <p>The Event: <span id="eventName"></span> is being rejected, you have the
                option to give a reason or any comments in the box below.</p>
            <p class="ui-icon ui-icon-alert"
            id="errorComment"></p>
            <textarea name="comments" id="comments" size="30"></textarea>
            <p>The Event: <span id="eventName"></span> will be removed from the system
                and will not go on to the calendar, any comments wiil be emailed to the
                event author.
                <br/>Click the button below.</p>
        </form>
    </div>
<TABLE WIDTH="100%" BORDER="1" CELLSPACING="0" CELLPADDING="4" DWCOPYTYPE="CopyTableRow"
BORDERCOLOR="#000066">
    <tr class="tableHeading">
        <td>Actions</td>
        <td>Event Name</td>
        <td>Event Description</td>
        <td>Date & Time</td>
    </tr>
    <tr class="tableRow<?=$num?>" class="1234">
        <td>
            <form name="actionTaken" class="1234" action="#" method="POST">
                <input type="hidden" name="submit_id" id="submit_id" value="1234" />
                <input name="approve" id="approve" value="Y" type="image" src="/control/images/tick-green.gif"
                />Approve
                <br/>
                <input name="edit" id="edit" value="Y" type="image" src="/control/images/edit.gif"
                />Edit & Approve
                <br/>
                <input name="reject" id="reject" value="Y" type="image" src="/control/images/cross-small.gif"
                />Reject & Comment</form>
        </td>
        <td class="event_name">Event Name</td>
        <td>Event Description</td>
        <td>Date Time</td>
    </tr>
</TABLE>

JS：

$("#comments_dialog").dialog({
    autoOpen: false,
    resizable: true,
    modal: true,
    buttons: {
        "Confirm Event Rejection": function () {
            var comments = $("#comments").val();


            if ((comments !== "") || (comments !== undefined)) {

                var dataString = 'submit_id=' + submit_id + '&reject=' + reject + '&comments=' + comments;

                $.ajax({
                    type: "POST",
                    url: "/echo/html/",
                    data: dataString,
                    success: function (response) {
                        if (response == "rejectSuccess") {
                            $(this).dialog("close");
                            $("tr#" + submit_id).fadeOut(3000);

                            $("#blue").after("<div id=\"green\">The event has been rejected and deleted from the system. Your comments have been sent to the person that submitted the event.</div>");
                            window.setTimeout(hideNotify, 60000);
                            $("tr#" + submit_id).remove();
                        } else {
                            $("#errorComment").text("There was an error, please refresh the page and try again.");
                        }
                    },
                    error: function () {
                        $("#errorComment").text("There was an error, please refresh the page and try again.");
                    }
                });
                return false;
            } else {
                $('#errorComment').text("You need to give a feedback for this rejection!");
            }

        }
    },
    closeOnEscape: false
});

$("input#reject").click(function () {
        submit_id = $(this).parent().attr("class");
        reject = $(this).val();
        var event_name = $(this).parent().parent().find(".event_name").html();

        $("#eventName").text(event_name);

        $("#comments_dialog").dialog("open");
    });

由于

Answer 1

似乎input#reject处于循环中（逐行）。使用类而不是id：id标识DOM中的UNIQUE元素。然后尝试使用$('input.reject).click...

Jquery UI，Dialog无法正常工作

1 个答案: