c# - ASP.NET MVC 提交按钮单击未触发

Question

我在触发按钮单击事件时遇到问题。我在同一 View 上有两个按钮，但由于某种原因，在一个按钮单击另一个按钮后，单击事件不会触发。你能帮忙吗？如果在单击复制数据按钮后看到下面的内容，则单击获取数据按钮不会触发。

<div id ="MainDiv">
    <table>
        <tr>
            <td>
                <h4> Please Select the Environment :</h4>
            </td>
        </tr>
        <tr>
            <td>
                @Html.DropDownList(
                    "SelectedEnvironmentID",
                    new SelectList(
                        Model.EnvironmentViewModel.Select(x => new { Value = x.Id, Text =  
                        x.Name }),
                        "Value",
                        "Text"), new { @onchange = "HideElements()" }
                    )
            </td>
        </tr>
        <tr>
            <td>
                <h4> Please Select the Version :</h4>
            </td>
        </tr>
        <tr>
            <td>
                @Html.DropDownList(
                    "SelectedVersionID",
                    new SelectList(
                        Model.VersionsModel.Select(x => new { Value = x.Id, Text = x.Number }),
                        "Value",
                        "Text"), new { @onchange = "HideElements()" }
                    )
            </td>
        </tr>
        <tr>
            <td>
                <input id="getData" name="ViewServerData" type="submit" value="View Profiles" />
            </td>
        </tr>

    </table>
</div>

 <p></p>   

 <div id ="ProfileCopyDiv" class="Copy" >
    <table>
        <tr>
            <td>
                <h4> Please Select the Environment To Copy Selected Server Profile:</h4>
            </td>
        </tr>
        <tr>
            <td>
                @Html.DropDownList(
                    "SelectedEnvironmentID2",
                    new SelectList(
                        Model.EnvironmentViewModel.Select(x => new { Value = x.Id, Text = 
                     x.Name }),
                        "Value",
                        "Text"), new { }
                    )
            </td>
        </tr>
        <tr>
            <td>
                <h4> Please Select the Version To Copy Selected Server Profile:</h4>
            </td>
        </tr>
        <tr>
            <td>
                @Html.DropDownList(
                    "SelectedVersionID2",
                    new SelectList(
                        Model.VersionsModel.Select(x => new { Value = x.Id, Text = x.Number }),
                        "Value",
                        "Text"), new { }
                    )
            </td>
        </tr>
        <tr>
            <td>
                <h4> Please Select the PlatformProfile To Copy:</h4>
            </td>
        </tr>

        <tr>
            <td>
                @Html.DropDownList(
                    "SelectedProfileID2", selectList: new SelectList(
                        Model.PlatformProfilewModel.Select(x => new { Value = x.Id, Text = 
              x.Name }),
                        "Value",
                        "Text"), htmlAttributes: new { }
                    )
            </td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td>  <input id="copyData" name="SnapshotData" type="submit" value="Submit" /> </td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>
  </div>
<script type="text/javascript">
    $(function() {
         @grid1.GetJavaScript();
         @grid2.GetJavaScript();

        $("#getData").click(function() {

            alert("Test");
            document.getElementById('gridWrapper1').style.display = 'block';
            document.getElementById('gridWrapper2').style.display = 'block';
            document.getElementById('gridheader').style.display = 'block';
            $('#gridheader').empty();
            //var content = "<table><tr><td><h4>Selected Environment :" +    
              $('#SelectedEnvironmentID :selected').text() + " </h4></td>" +
            //"<td><h4> Selected Version: " + $('#SelectedVersionID :selected').text() 
            + "</h4></td></tr></table>";
            //$('#gridheader').append(content);

            var url = '@Url.Action("GetServersWithSettings")';
            url = url + '?envtid=' + $("#SelectedEnvironmentID").val() + '&versionid=' + 
         $("#SelectedVersionID").val();
            $("#ServersWS").jqGrid('setGridParam', { url: url }).trigger('reloadGrid');
            alert(url);

            var url1 = '@Url.Action("GetServersWithZeroSettings")';
            url1 = url1 + '?envtid=' + $("#SelectedEnvironmentID").val() + '&versionid=' + $("#SelectedVersionID").val();
            $("#ServersWNS").jqGrid('setGridParam', { url: url1 }).trigger('reloadGrid');

            alert(url1);

        });

        $("#copyData").click(function() {

            var selectedRowId = $('#ServersWS').jqGrid('getGridParam', 'selrow');
            var rowData = jQuery("#ServersWS").jqGrid('getRowData', selectedRowId);

            $("#MainDiv *").attr("disabled", false).off('click');
            var url = '@Url.Action("Index")';
            //url = url + '?envtid=' + $("#SelectedEnvironmentID").val() + '&versionid=' + $("#SelectedVersionID").val()
            //              + '&profileid=' + rowData['ProfileId'] + '&envtid2=' + $("#SelectedEnvironmentID2").val() + '&versionid2=' + $("#SelectedVersionID2").val();
            HideElements();
            $.ajax({
                url: url,
                data: {
                            BaseEnvtId: $("#SelectedEnvironmentID").val(),
                            BaseVersionId: $("#SelectedVersionID").val(),
                            BaseProfileId: rowData['ProfileId'],
                            NewEnvtId: $("#SelectedEnvironmentID2").val(),
                            NewVersionId: $("#SelectedVersionID2").val(),
                            NewProfileId: $("#SelectedProfileID2").val(),
                },
                type: 'POST',
                datatype: 'json',
                success: function(data) {
                    //var content = "<div style=/""color: green ;font-weight:900;/"">Baseline Profile Copied Successfully</div>";
                    $("#MainDiv *").attr("disabled", true).off('click');
                    document.getElementById('ProfileCopyDiv').style.display = 'block';
                    $("#MainDiv *").attr("disabled", false).off('click');
                    document.getElementById('displaySuccess').style.display = 'block';
                    $("#ProfileCopyDiv *").attr("disabled", true).off('click');
                    document.getElementById('ProfileCopyDiv').style.display = 'none';
                },
                error: function() { alert('something bad happened'); }
            });



        });

    });
</script>

Answer 1

If you see below after copydata button click the getdata button click does not fire.

这是因为您禁用了 #MainDiv 后代元素的所有点击 copyData 时的点击事件。所以这种行为是很自然的。

     $("#copyData").click(function() {

        var selectedRowId = $('#ServersWS').jqGrid('getGridParam', 'selrow');
        var rowData = jQuery("#ServersWS").jqGrid('getRowData', selectedRowId);

        $("#MainDiv *").attr("disabled", false).off('click'); //<---- HERE
        var url = '@Url.Action("Index")';

因为off关闭事件，这里你不幸的按钮将被#MainDiv *选择器选中以关闭点击事件。

最好使用 prop 而不是 attr