I try to get the click on a checkbox using RactiveJS, as follows:
HTML:
<input type='checkbox' on-change-input-click="toggle">
JS:
toggle : function(){
treatment()
}
The toggle function never gets called.
Why would I like to catch the toggle event? Because once the checkbox toggled, other components must be changed. More precisely, this is a checkbox in a tree. Toggling a checkbox in a tree node toggles the descendants nodes.
Maybe there is another event than change, input or click I missed...
The complete code is in this fiddle.
Your fiddle is using version 0.3.7, in that version only proxy events are supported and there was no init event in which to subscribe, and there were no array methods on ractive itself. So you'd need to do something like:
ractive.on('toggle', function(){
this.get("clicked").push("clicked!");
});
Latest is version is 0.6.1, but you still have an issue with your code. If you want to call a method on the ractive instance, you need to invoke it in the handler:
HTML:
<input type='checkbox' on-change="toggle()">
JS:
toggle: function(){
treatment()
}
If you want to raise an event, you need to subscribe to that proxy name:
HTML:
<input type='checkbox' on-change="toggle">
JS:
oninit: function(){
this.on('toggle', function(){
treatment()
});
}
Try this:
I made a JS Fiddle for you
HTML:
<input id="myID" type='checkbox' onchange="yourFunction()" />
JS:
function yourFunction() {
alert("changed");
}
https://jsfiddle.net/4kxrkubc/
Related
I'm trying to create a simple form where i can add more text field after current text field.
And also i can add more field from the new field that ive added before (im using Recursion for this).
Problems come when i click the add on the first field, it creates more then 1 new fields (this happens because of recursion)
how do i refresh javascripts function without calling it again and again?
HTML :
<div class="line-input">
<input type='text' class='ipt-txt'>
<input type='submit' class='btn-smt' value="add new">
</div>
JS :
$(document).ready(function(){
callFunction();
});
function callFunction(){
$(".btn-smt").click(function(e){
$(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
callFunction();
});
};
JSFiddle : https://jsfiddle.net/1uofya3k/
Thanks!
Use event delegation:
$(function() {
$(document).on("click", ".btn-smt", function(e) {
$(this).parent(".line-input").clone().insertAfter($(this).parent(".line-input"));
});
});
That sets up an event handler at the document level that responds to clicks on your button class. You only have to add it once, and it'll work for all subsequent elements that are added dynamically.
(You don't really even have to do it in a "ready" handler; you can set it up before the DOM has been completed.)
Add true to the clone() function. From the jQuery API:
withDataAndEvents (default: false) Type: Boolean A Boolean indicating
whether event handlers should be copied along with the elements. As of
jQuery 1.4, element data will be copied as well.
https://api.jquery.com/clone/
$(document).ready(function() {
callFunction();
});
function callFunction() {
$(".btn-smt").click(function(e) {
e.stopPropagation();
$(this).parent(".line-input").clone(true).insertAfter($(this).parent(".line-input"));
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="line-input">
<input type='text' class='ipt-txt'>
<input type='submit' class='btn-smt' value="add new">
</div>
I'm creating a dynamic menu where I can add and remove a new form.
<input type="button" value="generate form" id="test"/>
<div id="form1"></div>
<script>
$(document).ready(function() {
$("#test").click(function() {
$("#form1").append("<select id='score-attempt'><option value='penalty'>penalty</option></select><input type='button' value='remove' id='remove'/><br>");
});
$("#form1 #remove").click(function() {
alert($(this).index());
});
});
The problem is that clicking on remove never triggers the alert box.
Thanks
The problem is that the element is added later and doesn't exist when the dom is loaded. Therefore the click event has to be delegated from an already existing element, e.g. like this:
$(document).on("click", "#remove", function(){
alert($(this).index() );
});
Instead of $(document) every other static parent element can be used for event delegation, just as example.
Update for the comments: as mentioned, $(document) only as example. I'd also prefer to use $("#form1") here like mithunsatheesh suggested.
And for reference: https://api.jquery.com/on/#on-events-selector-data-handler, section "Direct and delegated events":
"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."
Update for the correct index: you'll get the correct index using e.g.
$("#form1").on("click", ".remove", function(){
alert($(".remove").index($(this)));
});
with the adjustment to use remove as class instead of id for the remove-button. IDs have to be unique, so classes are a better solution. index() starts counting with 0, so you'll get 0 for the first one.
As working example: Fiddle
You need to add an event handler on your #form1 input with #remove.
Look here, here and here.
Here is the working jsfiddle for you.
I have a form as follows:
<form>
<label for="input">Input:</label>
<input type="text" id="input" maxlength="3"></input>
<button type="button" id="lock" onMouseDown="toggleInput()"></button>
</form>
And javascript code:
function toggleInput(){
if ($("#input").disabled){
$("#input").disabled = false;
}
else {
$("#input").disabled = true;
};
}
What I basically want to do is to check what state (enabled/disabled) the textbox is in, and then toggle the state accordingly. I don't know if the javascript portion even uses the correct syntax to check if the textbox is disabled, but it's what I could think of.
Thanks in advance!
EDIT: Reason as to why I've chosen to use onmousedown instead of onclick to execute the event with the button:
I have chosen to use onmousedown instead of onclick as it makes the app I'm building feel less clunky due to the presence of this feature with onclick: When you click on a button and then drag the cursor away from the button while holding the mouse button down, and subsequently lift your finger off the mouse button when the cursor is in an area away from the button on the webpage, the event will not be executed. Hence, I've chosen to use onmousedown as this is overcome.
Use .prop(), Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element
$("#input").prop('disabled',!$("#input").prop('disabled'))
DEMO
I am not sure why you are using onMouseDown. Use click instead
$("#lock").on("click", function() {
$("#input").prop('disabled',!$("#input").prop('disabled'))
});
DEMO with click
To do it with jQuery try this:
$("#input").prop("disabled", function(i, v) { return !v; });
Your existing code doesn't work because DOM elements have a .disabled property, but jQuery objects do not.
I'm not sure why you're using onmousedown instead of onclick for the button, but either way if you're going to use jQuery I'd recommend removing the inline event attribute in favour of binding the handler with jQuery:
$("#lock").on("click", function() {
$("#input").prop("disabled", function(i, v) { return !v; });
});
(You'd need to include that code either in a script block at the end of the body or in a document ready handler.)
Demo: http://jsfiddle.net/a7f8v/
You should append the event handler with jQuery instead of an onMouseDown event. The syntax could look like this:
<label for="input">Input:</label>
<input type="text" id="input" maxlength="3"></input>
<button type="button" id="lock"></button>
JavaScript:
$(document).ready(function() {
$("#lock").click(function() {
var input = $("#input");
input.prop('disabled',!input.is(':disabled'))
});
});
Example
I want to programmatically check a checkbox and trigger the checkbox's onchange function
I have tried ("#myCheckbox").click() but it only checks it and does not call its onchange function
How can I get the onchange function to execute as well?
edit:
When the document is ready i need the checkbox checked and its on change function called programatically.
Your change listener needs to be set before you trigger the click on the checkbox. The following code works with no issues:
$("#myCheckbox").on('change', function(){
console.log('Change');
}).click();
JSFiddle
How about something like this:
$('#myCheckbox').prop({ checked: true });
theOnchangeFunction();
$('#myCheckbox').on('change', theOnchangeFunction);
function theOnchangeFunction(){
}
you can try like below
$("#scheck").attr('checked', 'checked').change();
it will check the check box as well trigger onchange event for checkbox
ex:
Script :
$(document).ready(function () {
$("#scheck").attr('checked', 'checked').change();
});
function checkitout() {
alert("onchange event fired");
}
HTML :
<input type="checkbox" name="tdcheck" id="scheck" onchange="checkitout();" />
Don't understand, it works : http://jsfiddle.net/FW5Lp/
<input type="checkbox" id="myc">
<button id='clic'>click</button>
$('#myc').on('change', function(){alert('ca change');});
$('#clic').on('click', function(){$('#myc').trigger('click') });
Try both events by using on() like,
("#myCheckbox").on('click change',function(e){
alert(e.type);
})
When I change the id of a button I cannot find the new id with on.("click"). The function console.log() does detect that it's changed but I cannot detect it with the on() function.
HTML:
<form id="formName" action="" method="post">
<input type="submit" id="submitBtn" value="Submit" />
</form>
<button id="change">Change</button>
JS:
$("#change").on("click", function(){
$("#submitBtn").attr("id", "NewBtn");
});
$("#formName").submit(function(e){
e.preventDefault();
});
$("#NewBtn").on("click", function(){
alert("Hello");
});
So I need it to alert "Hello" after I have clicked on change. It does change the id I checked that with inspect element.
Fiddle: http://jsfiddle.net/WvbXX/
Change
$("#NewBtn").on("click", function(){
to
$(document).on("click", "#NewBtn", function(){
The reason for this is that you're wanting to use the delegate form of .on(). This call is a little different in that it takes a "string" as the second parameter. That string is the selector for your "dynamic" element while the main selector need either be a parent container (not created dynamically) or the document itself.
jsFiddle
you are setting onclick event for newBtn on load of page for the first time but unfortunately newBtn not available that time. hence after changing the id it will not trigger onclick function for newBtn.
you can do one thing to make it work, set onclick event for newBtn inside the same function where you are changing the id like below.
$("#change").on("click", function(){
$("#submitBtn").attr("id", "NewBtn");
// set on click event for new button
$("#NewBtn").on("click", function(){
alert("Hello");
});
});
.attr() function does not have a callback and thus it cannot be checked unless you setup an interval using setInterval but the function itself executes pretty soon so you are not going to need it.
For solving the problem in hand event delegation proposed by tymeJV is the right way to do it.