两个按钮的工作原理怪异

Question

我在这里面临的一个很奇怪的问题。我正在调用一个动作（这是一个视图），我有两个按钮。这些按钮在javascript中有单独的句柄，放在同一个.cshtml文件中。代码如下所述：

@model fbpm.Models.UserDetail 

@{ 
    ViewBag.Title = "My View"; } 

<style type="text/css"> 
    #top 
    { 
     width:360px; 
     float: left; 
     height:100px; 
     border-left: 1px solid black; 
     border-bottom: 1px solid black;   
    } 
    #right 
    { 
     width:360px; 
     float: left; 
     height:100px; 
     border-left: 1px solid black; 
     border-right: 1px solid black; 
     border-bottom: 1px solid black;    
    } </style> 
    <div id="top" class="display-field"> 
    &nbsp;&nbsp;Name &nbsp;&nbsp; : @Html.DisplayFor(model => model.UserName)  
    <br /> 
    <br /> 
    <input id="userid" type="hidden" value = @Html.DisplayFor(model => model.UserID)></input> 
    &nbsp;&nbsp;Address : @Html.DisplayFor(model => model.FullAddress) <br /> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

    @Html.DisplayFor(model => model.State) <br /> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    @Html.DisplayFor(model => model.Country)  
    <br /> 
    <br /> 
    </div> 
    <div id="top" class="display-field"> 
    &nbsp;&nbsp;PAN # &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; : @Html.DisplayFor(model => model.PANNo) 
    <br /><br /> 
    &nbsp;&nbsp;Booked Date&nbsp;&nbsp;: @Html.DisplayFor(model => model.BookedDate) 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    </div> 
    <div id="right" class="display-field"> 
    &nbsp;&nbsp; Booked Amount&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: &nbsp; INR &nbsp; @Html.DisplayFor(model => model.BookedAmount) 
    <br /><br /> 
    &nbsp;&nbsp; Remaining Amount &nbsp; : &nbsp; INR &nbsp; 
    <label id="ramt"/> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    </div> 
    <div id="display" style="clear:both;"> 
    <button type="button"style="width:150px" id="paysched" name="paysched" onclick="handleflat();">Payment Schedule</button> 
    <button type="button" style="width:150px" id="flat" name="flat" onclick="handleps();"> Flat </button> 
    </div> 
    <br /> 
    <div id="container" style="clear:both;"> Click on the above button to display Flat/Payment Schedule </div> <script type="text/javascript" language="javascript"> 
    $.get('@Url.Action("GetRamt", "Customer")?id=' + document.getElementById("userid").value, 
     function (amount) { 
      document.getElementById("ramt").innerHTML = amount; 
     }); 
     function handleflat() { 
      $.get('@Url.Action("GetFlat", "Customer")?id=' + document.getElementById("userid").value, 
      function (viewResult) { 
       $("#container").html(viewResult); 
      }); 
     } 
     function handleps() { 
      $.get('@Url.Action("paysched", "Customer")?id=' + document.getElementById("userid").value, 
     function (viewResult) { 
      $("#container").html(viewResult); 
     }); 
    } </script> 

但是，当我点击第二个按钮（Payment Schedule）时，它调用Flat按钮动作。当我继续点击第二个按钮时，它有时会起作用！当它工作时，我点击窗口中的其他区域，调用第一个按钮的功能。

请问有人可以帮忙吗？

* 编辑：第一个按钮总是强调，我想，这就是这个问题，为什么第一个按钮的功能总是被调用。我不希望这种行为*

EDIT2：与此同时，我只是玩弄代码，并将按钮更改为单选按钮！最初，两个单选按钮都没有被选中，当我点击第二个按钮时，第二个按钮被选中。现在，是有趣的部分=>当我点击结果视图的任何部分时，第一个单选按钮被选中！而现在，这两个单选按钮都是开启的！ :(

* EDIT3：我用相同的名字命名这两个单选按钮现在，点击结果DIV的任何部分正在选择第一个单选按钮*

将鼠标！在DIV - 容器中，突出显示第一个按钮，这就是为什么越来越被点击的按钮

问候， 哈日

Answer 1

的事实，你的HTML可以使用一些清理例如

除了：

0。

<input id="userid" type="hidden" value = @Html.DisplayFor(model => model.UserID)></input> 

变为：

@Html.HiddenFor(model => model.UserID) 

也... nbsp;等等。

和JavaScript可能是这样的：

$(function() { 
    // get the user id 
    var userId = $('#UserID').val(); 

    // get 'Remaining Amount' -> this should be included in your view model frankly speaking 
    // getting it like this is not "ideal" 
    $.get('@Url.Action("GetRamt", "Customer")?id = ' + userId, function (responseData) { 
     $('#ramt').text(responseData); 
    }); 

    // bind the button events 
    $('#flat').click(function() { 
     var flatUrl = '@Url.Action("GetFlat", "Customer")?id = ' + userId; 
     getCustomerData(flatUrl); 
    }); 

    $('#paysched').click(function() { 
     var paySchedUrl = '@Url.Action("paysched", "Customer")?id = ' + userId; 
     getCustomerData(paySchedUrl); 
    }); 

    // handle the response from the server for the customer data 
    var getCustomerData = function(url) { 
     $.get(url, function(responseData) { 
      $('#container').html(responseData); 
     }); 
    }; 
}); 

我希望这有助于。