Develop Reference

How to react on input text events in jquery?

I'm trying to react on <input> events with jquery, to modify a background label in as soon as the input contains text:
$('#inpt').on('input', ':text', function() {
Window.alert("test");
$('#mytext').attr('background', 'red');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<input id="inpt" type="text" placeholder="Type in here" />
</div>
<span id="mytext" style="background:green">Test</span>
Result: nothing happens. I don't even get the alert. Why?

The problem here that you use selector inside you on function cause the $('#inpt') is the container for looking the selector. But in this case the container is the selector (:input) you define in on() function too then it doesn't work and the Window wrong typo too.
attr is use to update the attribute of the element and background is not included inside attr list. Then you should wrap the background: red inside style attr or using css({background:red})
$('#inpt').on('input', function() {
window.alert("test");
$('#mytext').attr('style', 'background:red');
});

You should use with document and keyup
$(document).on('keyup', '#inpt', function() {
alert("test");
$('#mytext').css({'background': 'red'});
});

Using jQuery, trying to retrieve an image src value, when a nearest radio button is clicked on

i have a page that contains numerous divs like what is shown below, it is a page of color swatches, ie thumb size images.
what i'm trying to do is, when the user clicks on the radio button, get the source value of the image that is contained in the label element and then replace the main product image with it. but my code keeps returning the value as undefined. i've tried several variations on the code below, i've tried jQ's closest(), find(), next() and also prop("src") and attr().
('.swatches-radio-btn').each(function(){
$(this).click(function(){
var currImg = $(this).closest('label img').prop( "src" ); //not working
alert(currImg); //returns undefined
$('#productMainImage img').prop('src', currImg);
})
})
the mark-up is this,
<div id="productMainImage">
<img src="images/PP_watercress87.jpg" alt="Pepper Pot Silk" />
</div>
<div class="threads-swatch-wrapper">
<input type="radio" name="id[10]" value="129" id="attrib-10-129" class="swatches-radio-btn" />
<label class="attribsRadioButton thread-opts" for="attrib-10-129">Artichoke <br />
<img src="images/attributes/PP_artichoke77.jpg" alt="" width="260" height="320" />
</label>
</div>

I'd suggest:
$('input[type="radio"]').change(function(){
var currImg = $(this.labels[0]).find('img').prop('src');
$('#productMainImage img').prop('src', currImg);
});
JS Fiddle demo.
Or, if you're working with a browser that doesn't implement the labels property of the HTMLInputElement, you could instead use:
$('input[type="radio"]').change(function(){
var currImg = $(this).closest('div').find('label img').prop('src');
$('#productMainImage img').prop('src', currImg);
});
JS Fiddle demo.
References:
JavaScript:
labels (in the HTMLInputElement reference).
jQuery:
change().
find().
prop().

.closest searches up the tree whilst .find searches down. Use find instead.

This might work: var currImg = $(this).next('label').children('img').prop( "src" );

You can just use this -
$('.swatches-radio-btn').click(function(){
var currImg = $(this).next().find('img').attr('src');
$('#productMainImage img').attr('src', currImg);
});
WORKING DEMO - http://codepen.io/nitishdhar/pen/xsdIj

Appended Elements Using .on Method Unable To Be Removed

jQuery is deciding to be dumb or I'm simply missing something, but removing appended elements does not work for me using the following code:
$('#add-show').click(function() {
if ( $('#fav-search').val() == '' ) {
// do nothing
}
else {
$('.fav-results').append('<code><span class="icon-remove"></span>' + $('#fav-search').val() + '</code>');
}
});
$('.fav-results code').on('click', 'a', function() {
$(this).parent().remove();
});
And the HTML for anyone who is interested:
<div class="input-append">
<input class="span2" id="fav-search" type="text">
<button class="btn" type="button" id="add-show"><span class="icon-plus"></span></button>
</div>
<div class="pull-right fav-results">
<?php foreach($shows as $show): ?>
<code><span class="icon-remove"></span><?php echo $show['showname'] ?></code>
<?php endforeach ?>
</div>
Existing titles pulled from my database table are able to be removed but no appended elements can be.
I originally was using a .click handler but I read that it only works for elements existing in the DOM at the time of page load. After reading previous questions of the same nature I changed to using .on but it's still acting the same.

For your click event to apply to dynamically created elements, you should delegate it to the ancestor <div> instead of the <code> elements:
$(".fav-results").on("click", "code a", function() {
$(this).parent().remove();
});

You are using remove() instead of detach() which is removing the event handlers on all of the code elements before they are executed.

JQuery .on only firing once on dynamically generated elements

So I have the following problem. I am trying to add a two events to a table of checkboxes.
Here's an example of the html.
<body>
<div id='container'> //static element, everything beyond this element is dynamic
<div id='pane_x'>
<div id='bottom_x'>
<div id='bottom_left_x'>
<div id='results_x'>
<div id='list_x'>
<div id='table_1'>
<table>
<tbody>
<tr>
<td>
<input type='checkbox' name='blah' id='blah_obj.id_x' class='blahblah'>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to select the checkboxes only hopefully by using a prefix selector [id^='blah_']. I am able to get the code working for the first pane ie: pane_0, but it doesn't fire on pane_1 or beyond.
jquery(document).on("change", "[id^='blah_" + obj.id + "']", function() {
//code here
});
There may be nesting errors as I just made an approximate estimate of the html. The weird thing is I can see them by using a daisy chained .children() statement, but I can't select the input elements.
Since the comments don't support the same code blocks as this section I'll just add it here:
jquery(document).on("change", ".checked", function() {
var ids = jquery(this).attr("id").split("_");
if (ids[0] === "blah")
//do code
}
});
edited the id for clarity. The id structure is "blah_" obj.id "_" individual iterator. So 3 checkboxes on pane 0 would look like this:
blah_0_0
blah_0_1
blah_0_2
there are 2 other sets of checkbox lists on this page that I do not want to target with these functions, that is why i'm using the prefix selector.

The point of using startsWith selector is not to try to complete the whole value as you are doing with obj.id if obj.id is even defined.
Following would find all input with ID's starting with 'blah_' either existing or in the future.
jQuery(document).on("change", "input[id^='blah_']", function() {
//code here
});
Using the class as selector makes even more sense if they all share a common class
jQuery(document).on("change", "input.blahblah", function() {
//code here
});
Also note you have typo in jquery should be jQuery unless you have defined it otherwise in your own code
Important note ID's may not be repeated in a page, in case you have been repeating the same checkbox ID. They must be unique by definition

here another sample :
$("body").on({
click:function(){
// where $(this) is the current item changed
}
}, "input.blahblah");
​

get value in an element dynamically using DOM in javascript

Dear all, my issue is this.
I have like the alert box to display all the text I have in a element. May I know how I can do it?
My ori idea:
<a onclick="displaytext(something)">testing</a>
function displaytext(something){
alert(something);
}
Can someone please help me to solve this? Thanks.

Use innerHTML (or innerText if you don't want the HTML) and this:
<script>
function displaytext(something) {
alert(something.innerHTML); //alerts 'testing'
return false;
}
</script>
<a onclick="displaytext(this)">testing</a>

Use the innerHTML attribute, after you've gotten the object using getelementbyid or similar.

If you are just wanting to display the text you should use innerText
Live example
HTML
<a onclick="displaytext(this)">testing</a><br />
<a onclick="displayOtherText()">I'll display the div innerText</a><br />
<a onclick="displayOtherHtml()">I'll display the div innerHTML</a><br /><br />
<div id="textToDisplay"><span>Some sample</span> text here</div>
JavaScript
<script>
function displaytext(element){
alert(element.innerText);
}
function displayOtherText(){
alert(document.getElementById('textToDisplay').innerText)
}
function displayOtherHtml(){
alert(document.getElementById('textToDisplay').innerHTML)
}
</script>

you should use a simple function like this. but be careful this function takes an element id so this will not work for a class name or a element name.
function sayText(elId) {
var html = document.getElementById(elId).innerHTML;
if (html != null) alert(html)
}