JQuery creating divs and associated buttons on the fly [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm creating text fields each time a button is clicked, with each new div I create I also want to give it a button to delete this field. As can be seen in this JSFiddle.
However the button associated with each newly created div doesn't delete it's associated field. How can this delete that text fields?

You have to use delegation.
This works for the elements new to the DOM, after it was already loaded.
$(document).on('click','.deleteButton',function(){
$(this).closest('.form-group').hide();//remove
});
JSFiddle
Note: I added deleteButton class to the dynamically inserted buttons.

You can set in your button an onclick function and handle delete there like following:
window.deleteRow = function(obj){
$(obj).parent().remove();
}
fiddle

Related

Select form element won't expand when clicked in fullcalendar [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
In the following fullcalendar example (using v5.3.2) I've added a select element to the events, but the select elements won't expand when clicked, and so the value can't be changed.
I've updated the code example to insert the select tag into the DOM via the eventDidMount callback (which is what I do in my own code) and added jquery to add the event handler for the clicks on the select. You can see the clicks triggering in the console, but the select won't actually expand.
Is there any way to allow the select elements to be functional?
eventDidMount: function(arg) {
let content = $('<select><option>1</option><option>2</option></select>')
$(content).on('click', function(evt){
console.log(evt.target.tagName)
})
$('.fc-event-time', arg.el).before(content)
}

How do i automatically click the link while page loading? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I need bit help about jquery...
I'm using woocommerce and i have to make contract texts visible but my theme makes it visible only when I click on the contract link and I want this link to be automatically clicked while the page is loading.
Before click contract link
https://prnt.sc/t7owcb
After click contract link
https://prnt.sc/t7ox49
How can I leave this field open?
Thank you!
After some fiddling, we found a way to show the terms and conditions by default on the checkout page.
We can't just show the div, or trigger a click, because the terms' wrapper element is overwritten after an Ajax request, so it removes anything we try to do before that.
But we can force display: block by adding a <style> tag to the page. That won't be overwritten, and by using !important, we make sure this gets higher priority in CSS:
// When the DOM is ready
addEventListener('DOMContentLoaded', function() {
// Create a style tag
var s = document.createElement('style');
s.innerText = '.woocommerce-terms-and-conditions-wrapper{display: block!important;}';
// Append it to the body
document.body.appendChild(s);
});

on click function not getting called [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm trying to not display element after it was clicked, but the onclick method gets called when the page loads and then it does not get called when I click it. This is my code.
$(document).ready(function() {
$(".close").on('click', function(){
$(this).parent().parent().css("display","none");
});
}
What's the problem here?
The question is unclear. But your element is either not available on the dom from the beginning or you have not selected properly the element you want to hide.
Try this:
$(document).ready(function() {
$("body").on('click', '.close',function(){
$(this).closest("insert-element-name").css("display","none");
});
}

ASP.NET change text with no page refresh on button click [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I've found a couple other threads containing the same questions, but none of them had an understandable answer. I am supposed to make client side changes, but that is only possible in the .ascx file and if for instance i want to call a function to calculate something and then display it with no page refresh that is not possible :( any easy solutions?
With jquery, you can replace the contents of any existing HTML element using the .html() function. For example,
$("#MyDiv").html("Here is the new text.");
Since the function takes HTML as an input, you can even set the style if you want:
$("#MyDiv").html("Here is some text. <DIV class='foo'>Here is some more text in a different style.</DIV>");
You can also add new elements using .append(), like this:
$("#MyDiv").append("<p>Even more text</p>");
To do this upon a button click, you would use the .click() function. So your code would look something like this:
$("#MyButton").click(function() {
$("#MyDiv").html("You just clicked a button!");
});

HTML: Navigate to a different url using button [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I need to create a link or a button so that users can navigate to different urls (needs to be generated in a js function based on values selected in multiple dropdown)
I tried with a button but it doesn't navigate to the link, and with not able to change values of href it adds to previous values.
Can you please help
function link(url){
window.location.assign(url);
}
<button onclick="link('http://www.stackoverflow.com/')">Go to Stack Overflow without using an <a>!</button>
Try this:
https://jsfiddle.net/ykc8mLwj/
$(function() {
$("#id-of-your-select").on("change", function() {
$("#id-of-your-link").attr("href", $(this).val());
});
}

Categories

Resources