0

请帮我解决这个
问题 Q1：当我点击取消按钮时，所有功能似乎都在重复调用自己，我只在 IE 中遇到这个

我的 HTML 

<button class="btnCaller">diag caller 1</button>
<button type="button" class="btnCaller">diag caller 2</button >

<table id="diagMenu" style="display:none">
    <tr><td>
        <input id="anyField"></input>
        <button id="cmdInsertNewProject">Ok</button >
        <button id="cmdCancelNewProject">Cancel</button >
        </td></tr>  

</table>

我的 JS

$(document).ready(function() {
        $('.btnCaller').click(function() {
        fnAddNewProject()
        AddNewProject_ShowUI()
    })
});

function fnAddNewProject() {
    $('#diagMenu').dialog({
        autoOpen: false,
        width: 650,
        maxHeight: 1000,
        maxWidth: 600,
        modal: true,
        resizable: false,
        title: "Insert New Project",
        position: "center"
    })

    $('#btnRun').click(function() {
       alert("do other stuff")
    })
    $('#cmdInsertNewProject').live('click', function() {
        InsertNewProject();
    })

    $('#cmdCancelNewProject').live('click', function() {
        $('#diagMenu').dialog('close');
    })
}  

function InsertNewProject() {
    if ($('#anyField').val() == '') {
        alert("Fill up field to continue") //dont close the dialog
        return false
    } else {
        //reset and exit
        $('#anyField').val('')
        $('#diagMenu').dialog('close');
    }
}

function AddNewProject_ShowUI() {
    $('#diagMenu').dialog('open');
}

我在 jsFiddle 上有这个 http://jsfiddle.net/aeris/Qn9HE/

4

3 回答 3

0

您注册事件处理程序的方式存在问题。click 事件处理程序应该只添加一次，所以这可以在ready()方法中完成。

此外，您所做的一切都fnAddNewProject()应该只做一次，而不是每次都做，click这样您就可以将函数调用移动到ready()

你可以看到它在这里工作。

于 2012-11-19T03:42:31.133 回答
0

改变

.live('click',

至

.click(

我认为这应该可以解决您的问题。

编辑：

根据http://api.jquery.com/live/，似乎不推荐使用 .live() 命令。尝试使用 .on() 代替。

于 2012-11-19T03:19:37.227 回答
0

因此，正如已经指出的那样，您向对话框注册处理程序的方式导致每次事件发生时都重新注册它。结果，您会反复看到弹出窗口（因为每次都是新注册）。

话虽如此，您可以利用 jQueryUI 对话框的按钮属性将按钮（和相应的功能）附加到对话框，而不必担心所有这些事件注册。我没有完成它，但我在这里更新了你的例子（你会注意到 - 它更简单）。请注意对话框中的“按钮”属性。

$('#diagMenu').dialog({
    autoOpen: false,
    width: 650,
    maxHeight: 1000,
    maxWidth: 600,
    modal: true,
    resizable: false,
    title: "Insert New Project",
    position: "center",
    buttons: {
        "OK": function() {
            InsertNewProject();
            $(this).dialog("close");
        },
        "Cancel": function() {
            $(this).dialog('close');
        }
    },
    Cancel: function() {
        $(this).dialog("close");
    }
});
于 2012-11-19T03:53:13.637 回答