kendo ui - 버튼을 클릭하면 페이지가 새로 고쳐지는 이유는 무엇입니까?
-
26-12-2019 - |
문제
내 코드 아래에서 찾으십시오.
고객 검색 양식 템플릿
<script type="text/x-kendoui-template" id="customer-search-view-template">
<div class="searchform" id="searchCustomer">
<form class="frmSearch">
<input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
<button class="k-button" data-bind="click: searchClicked">Search</button>
<button class="k-button" data-bind="click: newClicked">New</button>
</form>
</div>
</script>
위의 템플릿을 로드하고 viewmodel 객체를 생성하는 customer-search.js
$(function(){
var views = {};
templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");
var layout = new kendo.Layout($('#customer-search-view-template').html());
layout.render($("#main"));
// Create an observable view model object.
var customer = kendo.observable({
customerName: "John",
searchClicked: function() {
this.set("customerName", "Search clicked");
},
newClicked: function() {
this.set("customerName", "New clicked");
}
});
// Bind the view model to the personFields element.
kendo.bind($('#searchCustomer'), customer);
});
검색 버튼을 클릭하면 텍스트 상자에 텍스트가 설정되지만 다음과 같이 페이지가 새로 고쳐집니다. ?searchTxt=Search+clicked
주소 표시줄에
이 버튼을 클릭하면 페이지가 새로 고쳐지는 이유와 버튼 클릭 시 페이지 새로 고침을 어떻게 중지할 수 있는지 알 수 있나요???
해결책
나는 다음과 같이 각각에 대해 'type' 속성을 배치하려고 합니다.
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
페이지는 각각이 양식 제출 작업을 수행하고 있다고 생각하지만 type 속성을 배치하면 검색하려는 이벤트에 액세스할 수 있습니다.데이터를 게시하지 않고 js 이벤트 핸들러만 게시하려는 경우 양식 태그가 필요하지 않을 수 있습니다.행운을 빌어요.
제휴하지 않습니다 StackOverflow