I am creating an application in which there is a button in a webpage.class = "button"
after clicking the button another button is created of same class.Now I want the same function is applied on the newly created button on click. But its not happening.
$('.button').click(function(){
var temp = '<input type="button" class="button" />'
$('#form').append(temp);
})
This function is working for the first button which is created on page load.But this is not working on the button which is created after clicking of the previous button.
How to fix this issue?
Please help
The problem is because events are attached on load of the DOM. Therefore any elements added after that point do not have the event. The fix is to use a delegated event handler, like this:
$('#form').on('click', '.button', function(){
var temp = '<input type="button" class="button" />'
$('#form').append(temp);
})
Related
My goal is to replace a button with another button, but I am running into some issues. I am able to trigger the first button click and I am able to cause an alert with the second button click, but for some reason when I try to trigger the first button click in the click event handler of the second button, it doesn't work. What am I doing wrong? For some context, I'm doing this in Powerapps Portals by adding a Content Snippet.
$(window).load(function() {
//Code to Add Custom 'Register' Button (and Hide the original one- currently commented out)
$('#SubmitButton').after('<input type="submit" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
//$('#SubmitButton').hide(); *THIS WORKS*
//$("#SubmitButton").click(); *THIS ALSO WORKS*
$("#mySubmitButton").click(function()
{
//window.alert('yes!'); *THIS WORKS*
$("#SubmitButton").click(); // *THIS DOES NOT WORK*
});
});
You need to prevent the default action to stop the form from submitting when the button is clicked.
$("#mySubmitButton").click(function(e){
e.preventDefault();
$("#SubmitButton").click();
});
Alternatively, you can set the button's type to "button" so clicking it does not submit the form by default.
$('#SubmitButton').after('<input type="button" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
I have two buttons and one input. The input takes the value of the clicked button. Both buttons have the same class, have one click (Vue) for add active class, and second click. On click take the button's value and append it in the input.
The problem with which I am stuck is that the function for taking the value works after the second triggered click.
I've tried with dblclick and to delete the click for active class - but nothing changed. Can someone give a hand with this? Thank you.
Vue project (js function imported in methods)
<div class="col-md-12 buttons-wrapper" id="direction">
<button id="buy-button" value="1" name="Direction1" class="button btn buy" #click="selected = 1" :class="{active:selected == 1}" v-on:click.capture="buttonDirectionValue">Buy</button>
<button id="sell-button" value="2" name="Direction2" class="button btn sell" #click="selected = 2" :class="{active:selected == 2}" v-on:click.capture="buttonDirectionValue">Sell</button>
<input id="inputDirection" name="Direction" type="text" placeholder="" class="form-control input-md" style="display: block" readonly></input>
</div>
buttonDirectionValue() {
event.preventDefault();
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
});
buttonDirectionValue() {
event.preventDefault();
$("#direction button").trigger("click");
});
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
});
Above should be your code. Correction is to place the .click outside of buttonDirectionValue() function.
If you place the .click inside of buttonDirectionValue() function, the .click will only be registered when the button is clicked for the first time and triggered on the second click.
While placing it outside will bind the .click on page load and trigger the click on buttonDirectionValue() function call.
Hope this helps
The problem obviously is that you bind the click event after the button click
you can bind the click event right after page loads like that:
$(document).ready(function(){
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
}
});
//edit1
you can also remove the v-on:click.capture="buttonDirectionValue"
and use this code to bind click events for both buttons
$(document).ready(function(){
$('button.buy, button.sell').click(function() {
$("#inputDirection").val($(this).val());
}
});
Im having a problem attaching an event to a dynamically generated button. However after some research most of the solutions claim this error is usually generated from a form control. However in my case the error "invalid form control with name='answer'" is being generated and triggered when a button i have dynamically generated is pressed :
$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent()'>"+ "Button"+"</button>"));
I have appended a button to an existing div and call an onclick function that removed this element when it is clicked like this :
function clickEvent()
{
$(this).remove();
}
After running this in chrome this method works only on the first button added. After the first button is removed as expected it begins to generate the error "clickEvent" and adding a number count on each click and after reading many posts here about the error being attributed to a form i remain unsure how to solve the issue as the button is completely unrelated to the form on my HTML document and subsequently setting the form to not require validation does not solve the issue with the "novalidate" property. But note, if i remove the attached onclick event the error is not triggered.
Any help would be appreciated :)
$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent(this)'>"+ "Button"+"</button>")); // pass this to clickEvent function
function clickEvent(obj)
{
$(obj).remove(); // remove button like this
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="BoxInner"></div>
This is because the event listener is created on page load.
You should do something like this
$(wrapper_that_always_exists).on('click', the_freshly_added_element, function() {
...
});
So in your example it would be something like
$('#BoxInner').on('click', '#dynamicButton', function() {
...
});
When you do this, the BoxInner element will always listen for all clicks on any element inside, initially created or not, that has the id dynamicButton
I have a very strange issue with jQuery where I am triggering a click on a radio button but it is not firing completely and is not being captured by an on click function, however a similar call to jQuery trigger is being captured.
In the following jQuery I am selecting a <div> and using find to search for the suitable content.
var prev_chosen_d_option = $('#d_options_table .d_option_row[data-option-id="' + d_option_for_jq + '"]');
// this works, and the on click is captured
prev_chosen_d_option.find('.hover_target').trigger("click", true);
// this selects the radio button, but DOES NOT fire the on click function seen below
prev_chosen_d_option.find('#d_standard_use_b_as_s_no').trigger("click", true);
These are my radio buttons:
<input type="radio" value="yes" id="d_standard_use_b_as_s_yes" name="d_standard_use_b_as_s">
<input type="radio" value="no" id="d_standard_use_b_as_s_no" name="d_standard_use_b_as_s">
$("#d_options_table .d_option_row .hover_target").on("click", function(e, isFirstLoad) {
// it comes in here fine!
});
$('input[name=d_standard_use_b_as_s], input[name=d_next_day_use_b_as_s], #del_standard_use_b_as_s_no').on("click", function(e, isFirstLoad) {
// it DOESN'T come in here
});
I can't see how jQuery is able to select the radio button and successfully check it, but the on method doesn't pick it up as a click...especially when I have a very similar setup running in close proximity in the code.
I know for sure that the radio buttons are within the selector as I can dump it out to the console with a console.log. Interestingly, when I dump out the events attached to it to the console I get undefined from this after the trigger:
console.log(prev_chosen_d_option.find("#_standard_use_b_as_s_no").data('events'));
(I am using jQuery 1.7.2 and testing in FF).
Instead of
$('input[name=del_standard_use_b_as_s], input[name=del_next_day_use_b_as_s], #del_standard_use_b_as_s_no').on('click', function(e) {
//
});
Try :
$(document).on('click', 'input[name=del_standard_use_b_as_s], input[name=del_next_day_use_b_as_s], #del_standard_use_b_as_s_no', function(e) {
//
});
The reason for this not working was simply I had the click handler below where I was actually triggering the click in the code.
I have a div that I'm able to save text to when I click a save button but what I would like is if the text would just automatically save on an onmouseout event. For example:
I have a div and two buttons (Save and Cancel). The user is currently able to mouse over the current text data inside the div, click on the text and they can then edit said text. The only way they can save this text is by clicking the save button. Is there a way to use onmouseout to save the text so that the user simply has to click and edit the text, then click away and have it saved?
The code below is what I have thus far but it just doesn't seem to work. I'm not worried about the save code because I already have that elsewhere. I'm just trying to get it to where I can type in the text, get onBlur to fire, and have the HTML revert back to what it looked like before I clicked the text. As of right now I can click it and the textbox within the div appears but when I click outside of the div, the textbox stays visible. Any ideas?
function setClickable() {
$('#editInPlace').click(function() {
var textarea = '<div onBlur="saveChanges()><textarea rows="3" cols="30">' + $(this).html() + '</textarea>';
//var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
var revert = $(this).html();
$(this).after(textarea).remove();
})
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
saveChanges(this, revert);
});
};
function saveChanges(obj, cancel) {
if (!cancel) {
var t = $(obj).parent().siblings(0).val();
//need some post code for saves
}
else {
var t = cancel;
}
if (t == '') t = '(click to add text)';
$(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
setClickable();
}
I think you want the onblur event as you mentioned clicking outside of the div (not just moving the mouse out):
<div contenteditable="true" onblur="saveContent()">
Edit me and then click or tab out to save.
</div>
Whatever you have for your Save button's onclick event will go in the onblur event of the div. This will just save the content when the element loses focus - it defeats the point of having a cancel button though.