Question

please help me on this
Q1: When i clicked the Cancel Button, all the functions seems to repeat calling itself, and I only encounter this in IE

my 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>

my 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');
}

i have this on jsFiddle
http://jsfiddle.net/aeris/Qn9HE/

Answer 1

There is a problem with how you’re registering the event handlers. The click event handlers should be added only once, so this can be done in ready() method.

Also what ever you are doing in fnAddNewProject() should be done only once, not on every click so you can move the function call to ready()

You can see it working here.