I have a Vue component with
an <input> element that binds the v-on:keyup.enter key to doFilter()
a <button> that binds the v-on:click event to doFilter()
<input type="text" v-model="myVar" #keyup.enter="doFilter" />
<button #click="doFilter">Filter</button>
The button event will fire doFilter(), but the key up event will not fire, unless I add the .native modifier.
<input type="text" v-model="myVar" #keyup.native.enter="doFilter" />
The Vue.js documentation says this about .native:
listen for a native event on the root element of component.
When do I need to use .native and why does the keyup event not trigger without it?
Update 1: Add codepen and code
Runnable demo at https://codepen.io/hanxue/pen/Zapmra
<div id="app">
<md-toolbar>
<h1 class="md-title" style="flex: 1">#keyup.native event</h1>
<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
</md-toolbar>
<md-input-container>
<label>#keyup.enter</label>
<md-input type="text" #keyup.enter="doFilter" placeholder="#keyup.filter">
</md-input>
</md-input-container>
<md-input-container>
<label>#keyup.native.enter</label>
<md-input type="text" #keyup.native.enter="doFilter" placeholder="#keyup.native.filter">
</md-input>
</md-input-container>
<md-input-container>
<button #click="doFilter" placeholder="#keyup.filter">
#click </button>
</md-input-container>
</div>
<script>
Vue.use(VueMaterial)
var App = new Vue({
el: '#app',
methods: {
doFilter: function() {
alert('doFilter!')
}
},
})
</script>
Based on your comments, I'm assuming that you're using the Vue Material libary and the <md-input> component instead of an <input> element.
If you listen to the keyup event without using the .native modifier (via <md-input #keyup.enter="doFilter">), then your component is waiting for the <md-input> component to emit a custom keyup event.
But, that component does not emit a keyup event, so the doFilter method will never be called.
As the documentation states, adding the .native modifier will make the component listen for a "native event on the root element" of the <md-input> component.
So, <md-input #keyup.native.enter="doFilter"> will listen to the native keyup DOM event of the root element of the <md-input> component and call the doFilter method when that is triggered from the Enter key.
I had the same problem on a custom vue component on which I was listening to both #select and #keyup.native.enter and I was receiving the Enter key twice because I didn't pay attention: onSelect emits an onKeyDown for Enterand onkeyUp flared secondly.
My solution was to listen to #keydown.native.enter so that the #select cycle of keys was unbothered (which is keydown -> keypresssed -> keyup).
Related
I have a problem with Vue, I have a code that run good #click, but I want to add keyboard handlers also. This is the code :
<section v-else class="row controls">
<div class="small-12 columns">
<button #click="playerAttack" #keyup.a="playerAttack" id="attack">
ATTACK
</button>
<button #click="specialAttack" #keyup.s="specialAttack" id="special-attack">
SPECIAL ATTACK <br />
<span>Cooldown : {{ this.specialCooldown }}</span>
</button>
<button #click="playerHealing" #keyup.h="playerHealing" id="heal">
HEAL <br />
<span>Cooldown : {{ this.healingCooldown }}</span>
</button>
<button id="give-up">GIVE UP</button>
</div>
The point is, on first button, 'Attack' in this case the keyup event works fine from start. Unfortunately the 'Special Attack' and 'Heal' doesn't, but... When I clicked on any of these two keyup event seems to change, and now 'Attack' is not working with the non clicked button 'Heal' f.e. but 'Special Attack' works fine, until I clicked on 'Attack' or 'Heal'. The keyup event are changing to fire last clicked button, and keyup is recognized correctly.
I don't think this is methods problem cause everything works fine #click and also #keyup when last-clicked button keyup event is invoked. Is it problem with code or I am not knowing some Vue specifics?
In JavaScript Events always origin from an element and bubble upwards through their parent elements. Keyup Events origin from the currently focused element.
Your event listeners only catch the keyup event if the button on which the listener is defined is focused.
To solve the problem you can try listening to keyup events on an element that encloses the buttons, e.g. the section element.
<section v-else class="row controls"
#keyup.a="playerAttack"
#keyup.s="specialAttack"
#keyup.h="playerHealing">
My kendo template is as follows:
<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
<span class='k-progress'>
</span>
<strong class='k-upload-status'>
<button type='button' class='btn-remove k-button k-button-bare k-upload-action'>
<span class='k-icon k-i-close k-delete' title='Remove'></span>
</button>
</strong>
</script>
<script>
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.
$(".k-delete").click(function () {
alert("Remove button clicked");
});
since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.
$("body").on("click", ".btn-remove", function () {
alert("dynamic control event handler");
});
Any help is appreciated!
According to Kendo Upload API documentation, you can bind a function to the remove event.
So this is where you could hide your file-err-msg div :
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html()),
remove: function(e) {
$('#file-err-msg').hide();
}
});
I have some problem.
This is HTML document.
<input class="input" type='checkbox' id='ev_1' name='ev_1' checked='checked'/>
<label for='ev_1'>
<button class='ui-btn custom-btn' id='issue'>On</button>
</label>
This is javascript.
$("#issue").click(function(event){
alert("!");
}
I think that alert("!"); is occur when I click button.
But, not effect....
I want to show alert("!");
I need your help.
As Omar mentioned, your button should be outside the label and your input checkbox can be inside the label:
<label for='ev_1'>
<input class="input" type='checkbox' id='ev_1' name='ev_1' checked='checked' />On
</label>
<button class='ui-btn custom-btn' id='issue'>On</button>
Then you can have event handlers defined in the jQM pagecreate handler. To handle the checkbox, use a change event handler, and for the button a click handler:
$(document).on("pagecreate", "#page1", function () {
$("#issue").on("click", function (event) {
alert("Button Click");
});
$("#ev_1").on("change", function (event) {
alert("Checkbox Change");
});
});
Here is a working DEMO
Please find below my code:
Template of customer search form
<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>
customer-search.js where loading above template and creating viewmodel object
$(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);
});
When I click the search button, the text is set in the textbox but this also refresh the page with ?searchTxt=Search+clicked in the address bar.
May I know why this button click refresh the page and how do I stop refreshing the page on button click ???
I would try and place the attribute 'type' for each like so:
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
The page thinks that each are performing a form submit action, but by placing the type attribute, you can access the event you intended for search. You may not need your form tags if you are not going to post any data, but rather just a js event handler. Good luck.
The reason is that you are inside a <form>, which has no settings (URL, method, etc), so the browser's default behavior is probably to perform a GET to the current URL (which is a refresh). You could just use <div> instead of <form> if you just want to execute that method.
I have the jquery datepicker plugin bound to any elements with class="datepicker".
$(".datepicker").datepicker();
I am loading a form with:
<button type="button" class="btn btn-xs pull-right" data-toggle="modal" data-target="##modal" href="profile/eventnew"><i class="icon-plus"></i></button>
In the form that is loading I have a field with class='datepicker', however it is not getting picked up by the datepicker plugin as the element was not there when $(".datepicker").datepicker(); was executed.
I know that with events, I can use the jquery .on() method to bind to ajax loaded elements, but there is no event here.
How do I bind something such as $(".datepicker").datepicker(); to Ajax loaded elements?
Many Thanks
try:
$('#myModal').on('shown.bs.modal', function () {
$(".datepicker").datepicker();
})