This question already has answers here:
How to select an element inside "this" in jQuery?
(2 answers)
Closed 2 years ago.
Hi I'm trying to use jquery to autoupdate an input field which is wrapped around a contenteditable div. There are multiple such divs that is generated by the backend code, and I would like each input to update only if its parent's div's contenteditable has been updated. The html looks something like this:
<div class="to-change" contenteditable="true">
Text that can be edited
<input name="autoupdate">
</div>
I have tried using the following jquery code:
<script>
$( document ).ready(function() {
console.log( "ready!" );
$('.to-change').on("keyup", function() {
var input = $(this).text()
$('input:first-child').val(input)
})
});
</script>
The thing is when I try to change the text, every other such divs' input field will also be updated with the same text. How do I change the jquery code such that the input field will always take reference from its own parent div?
Thanks!
You can Select that element like this:
$(document).ready(function () {
console.log("ready!");
$('.to-change').on("keyup", function () {
var input = $(this).text()
$('.to-change > :first-child').val(input);
});
})
Or:
$(document).ready(function () {
console.log("ready!");
$('.to-change').on("keyup", function () {
var input = $(this).text()
$('.to-change > input').val(input);
});
})
">" Used for selecting Direct childs of an Element, You can find More about this selector in https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
jQuery click not working for dynamically created items [duplicate]
(8 answers)
Closed 7 years ago.
I'm trying create a list of Messages a user can type in an textarea on the site and delete any of them using a button he automatically creates with each message.
My idea is that I create a div in which I first put the message of the user in and then prepend the button with the same ID of the div; This way I call the ID of the button and remove all elements with the same ID.
<script>
var theButtonId = 1;
$(document).ready(function() {
$('#commentButton1').click(function() {
var toAdd = $("textarea#commentTextarea1").val(); //Content to add
var theId = "dieButtons"+theButtonId.toString(); //creating unique ID
// Adding first Div
$('#targetField').append(
$('<div />', {
id: theId,
}));
// Adding content
$('#'+theId).append(
$('<div />', {
text: toAdd
}));
//(-----1-----)Adding Button
$('#'+theId).prepend(
$('<button />', {
type: 'button',
id: theId,
class: 'commentButton2',
text: "-"
}));
theButtonId++;
});
});
//Button Command
$(document).on("ready", function(){
//(-----2-----)
$('.commentButton2').on("click", function(){
var thisId = $(this).attr("id");
$("#"+thisId).remove();
});
});
</script>
It perfectly lists the elements in the #textfield
I added a button directly in my HTML code which deletes certain divs, as well as itself using the code above. This is why I know that the Problem is that the created Buttons at (-----1-----) don't react to the command in (-----2-----)
I already tried to create an Input of type button and put a .click function instead of .on("click", [...]).
$(document).on('click', '#buttonid', function() {
});
Use event delegation on dynamically created elements
DOCUMENTATION
Working fiddle
Try to use :
$('#targetField').on("click",'.commentButton2', function(){
Instead of :
$('.commentButton2').on("click", function(){
It should work.
I would like to get the value of an input and return it to a span. I would like to update the span each time the input is changing. The problem is that i will use it for a colorpicker so the user will not usualy write the color value(maybe paste it). So everytime the input textfield will be updated by the colorpicker js i want to update my own field.
I created a simple code to help you understand what i want to do.
Pressing the + you will change the value of the input field and i would like to get that value and print it in the span. Thank you.
HTML ::
<div>
<input type="text" class="mariinsky" /><button id="inside">+</button>
</div>
<button id="outside">Button</button><br />
input value = <span></span>
JS ::
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( '.mariinsky' ).change( function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
http://jsfiddle.net/existence17/9V8ZU/1/
Add .change() to the end of your '+' handler:
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i).change();
i++;
});
That will force the change event to fire and then your code will update the span.
For live DOM changes, use the jQuery on function - the following code would work in your case:
var i = 0;
jQuery('button#outside').click(function() {
jQuery('div').toggle();
});
jQuery('button#inside').click(function() {
jQuery( ".mariinsky" ).val(i);
i++;
});
$( 'button#inside' ).on('click', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
jQuery doesn't automatically trigger events through code. You need to do so manually using the .trigger() method.
Adding one line did it for me: jQuery('.mariinsky').trigger("change").
Here's a working example: http://jsfiddle.net/9V8ZU/2/
Also a useful question for reference: How to trigger jQuery change event in code
please use this :
$( '.mariinsky' ).on('keypress keyup keydown click copy cut paste', function() {
var bolshoi = jQuery( ".mariinsky" ).val();
jQuery( 'span' ).text(bolshoi);
});
Fiddle example
all the rest of the provided answers aren't covering the entire options.
I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.
this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});
Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});
this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;
The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});
You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});
This is a followup question. I've been trying to grab the selected text from multiple iframe using rangy. The code seems to be working for 1st iframe .
i want to grab elements using the same button., for div it works k. but in iframe we need to specify the iframe and when i tried the array of iframes ., that is not working
Use jQuery $.each:
$(function () {
$('button').click(function () {
$.each(iframe, function(idx, vl) {
var selection = rangy.getSelection(iframe[idx]);
alert(selection);
});
});
});
Demo: http://jsfiddle.net/cWV3G/
Here is the Working Fiddle
Try getting the the Rangy iframe selection object and access the FocusNode property and get the selected text from that iframe like this:
JS:
$(function () {
$('button').click(function () {
iframe.each(function(i){
if(rangy.getSelection(iframe[i]).focusNode!=null)
{
var selection = rangy.getSelection(iframe[i]).focusNode.data;
alert("Iframe - "+(i+1)+ " selected text : '" +selection+"'");
}
});
});
});
I have been trying to create a form which changes depending on the users entry. So far I have been successful in using a radio input to change which content is to be shown, but I am having trouble editing the JS to work with a drop down menu.
HTML
<div class="show-and-hide-content">
<select>
<option></option>
<option data-type="true">true</option>
<option data-type="false">false</option>
</select>
<div class="hidden content content-true">You have selected true.</div>
<div class="hidden content content-false">You have selected false.</div>
</div>
CSS
.hidden {
display:none;
}
Javascript
$(function () {
$('.show-and-hide-content').each(function (i) {
var $row = $(this);
var $selects = $row.find('select');
$selects.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
Working radio button JSFiddle
Non working drop down JSFiddle
I know that the JQuery is finding the right elements and is changing the display of them, but it never changes the display to make them visible. I think the problem may be that the JS isn't correctly getting the data-type variable from the option's.
I want the JQuery to work as intended and show the correct divs based on the users selection.
How can I amend the code to do this? Thanks for helping.
You now got:
var type = $(this).attr('data-type');
Since the function is called on the <select>, you select the data-type attribute of the <select> (which is defined), and not from the <option>.
So, you'll need to find the selected <option>:
var type = $(this).find('option:selected').attr('data-type');
Check the updated Fiddle.
[EDIT]
If you want to simplify your code, you could use this:
$(function () {
$('.show-and-hide-content select').on('change', function() {
$(this).parent().
find('.content').hide()
.filter('.content-' + $(this).find('option:selected').attr('data-type') ).show();
});
});
Demo.
Or change your select data-type to value and use
var type = $(this).val();
DEMO
Try this one
$(function () {
$('#select').on('change', function () {
var selctedval = $(this).val();
$('.content').hide();
$('.content-' + selctedval).show();
});
});
This will use whatever value you have in the "data-type" attribute and match it to the "content-" class that you have on the message. If there is no matching message then, no message will show.
$('.show-and-hide-content select').on('change', function(){
var selected = $(this).find('option:selected').data('type');
$('.content').addClass('hidden');
$('.content-' + selected).removeClass('hidden');
});
Here is a fiddle