KnockoutJS - 一些點擊綁定射擊上的Enter鍵按下

我有一個大的淘汰賽視圖模型一個.NET Web表單頁面，我切換被隱藏一些div的或者如果點擊某個div的改變CSS。我也有一些不同的事件處理程序和一些計算機引起ajax查找。KnockoutJS - 一些點擊綁定射擊上的Enter鍵按下

問題是，當我在頁面上的任何輸入框中按Enter鍵，viewmodel中的一個函數觸發綁定到div上的click處理程序，另一個綁定到此div內的按鈕。如果我刪除了div上的點擊綁定，整個頁面都會發布，這讓我認爲它與默認按鈕行爲有關。

我試圖重建的功能。在這jsfiddle體積和下面的代碼，但是，這不是重建的問題。

HTML

<body> 

    <div style="width:30%; float:left;"> 
     <div id="div1" class="divClass" data-bind="click: showDiv1, css: { active: div1Visible }"> 
      <h2>Div 1</h2> 
     </div> 
     <div id="div2" class="divClass" data-bind="click: showDiv2, css: { active: !div1Visible() }"> 
      <h2>Div 2</h2> 
      <button id="randomButton">Random Button</button> 
     </div> 
    </div> 
    <div style="width:70%; float:left;" data-bind="visible: div1Visible"> 
      <input placeholder="name" 
       id="nameSearch" 
       type="text" 
       name="nameSearch" 
       data-bind="value:nameSearch, valueUpdate: 'afterkeydown', event: {keyup: doSearch}" 
       autocomplete="off" 
       /> 
     <input placeholder="address" 
       id="addressSearch" 
       type="text" 
       name="addressSearch" 
       data-bind="value:addressSearch, valueUpdate: 'afterkeydown', event: {keyup: doSearch}" 
       autocomplete="off" 
       /> 
      <button id="resetButton">Reset</button> 
     <div> 
      <input id="grid" value="pretend I am a grid" /> 
     </div> 
    </div> 
     <div style="width:70%; float:left;" data-bind="visible: !div1Visible()"> 
      Should be hidden unless div 1 inactive 
      <div data-bind="text: message"></div> 
     </div> 

</body>

function MyViewModel() { 
    // Data 
    var self = this; 
    self.div1Visible = ko.observable(true); 
    self.nameSearch = ko.observable(''); 
    self.addressSearch = ko.observable(''); 
    self.message = ko.observable(''); 

    self.showDiv1 = function() { 
    self.div1Visible(true); 
    };  
    self.showDiv2 = function() { 
      self.div1Visible(false); 
    }; 

    self.doSearch = function (data, event) { 
     var charCode = (event.which ? event.which : event.keyCode); 
     if (charCode === 40) { 
      $('#grid').focus(); 
     } 
     return false; 
    }; 

    self.quickSearch = ko.computed(function() { 
     if(self.nameSearch() || self.addressSearch()) { 
     //do some ajax grid binding if any values in search inputs 
      $('#grid').val('found values'); 
     } 

    }, self).extend({ throttle: 400 }); 

    self.searchHasValues = ko.computed(function() { 
     return self.nameSearch() || self.addressSearch(); 
    }); 

    self.setMessage = function() { 
     self.message('Shows when random button clicked'); 
    }; 

    self.resetSearch = function() { 
     self.nameSearch(''); 
     self.addressSearch(''); 
     $('#grid').val('searchReset'); 
    }; 

} 
window.viewModel = new MyViewModel(); 
ko.applyBindings(viewModel); 

    $('#randomButton').click(function (e) { 
       e.preventDefault(); 
       viewModel.setMessage(); 
      }); 
    $('#resetButton').click(function (e) { 
       e.preventDefault(); 
       viewModel.resetSearch(); 
      });

CSS

.divClass { 
    background-color: #ccc; 
    height:200px; 
    padding:10px; 
} 
.active { 
    background-color: yellow; 
}

來源

2013-05-29 Paul McCowat

我發現很難找出到底是什麼問題是，但我確實知道一些關於asp.net webforms的知識，所以我會在這裏猜測一下。

您使用的是asp.net webforms，它通常將頁面的整個主體包裝在一個表單中。
在任何HTML形式，在文本輸入具有焦點時按回車鍵，執行第一可見按鈕的點擊處理程序。
你的按鈕被包含其中有它自己的Click事件處理程序一個div 內。點擊事件觸發的按鈕向上冒泡並執行它的父元素的所有任何點擊事件處理權DOM的頂部。

您可以通過在輸入元素上附加一個keypress/keydown事件處理程序來解決此問題。在該處理程序內部，只有在按下輸入按鈕時才能防止事件冒泡。

來源

2013-05-30 00:15:48 RodneyTrotter

我可能會嘗試將其移動到一個MVC項目，看看它是否仍然發生。也將嘗試所有輸入項目的處理程序 –

很久以前，我已經轉移到MVC，我一定會推薦它。大部分旨在簡化事情的webforms「魔術」實際上使事情在使用客戶端框架（如敲除）時變得更加困難。祝你順利！ – RodneyTrotter

KnockoutJS - 一些點擊綁定射擊上的Enter鍵按下

回答

相關問題