I'm creating a Jquery Mobile range dynamic with this code:
$('<input data-type="' + elementType + '" id="' + name +' " min=' + value1 +' max=' + value2 + ' value="127" >').appendTo("fieldset");
Now I want to add a change event with this code:
$(".brightness").change(function() {
alert("changed");
});
I have no idea why it's not working, I tried to refresh the range after defining the event, I tried to bind the event to the range, nothing works. The function that contains the first code snippet, is getting called first, and the function that contains the second snipped is getting called second.
Does someone of you know what I'm doing wrong, or what I'm overlooking?
Two things you need to do
1. add css class brightness to your range input
$('<input class="brightness" data-type="' + elementType + '" id="' + name +' " min=' + value1 +' max=' + value2 + ' value="127" >').appendTo("fieldset");
Add event handler using on
$(document).on("change",".brightness",function() {
alert("changed");
});
EDIT - for id selector use # instead of .(dot) like below
$(document).on("change","#brightness",function() {
alert("changed");
});
Check jQuery Selector
Use on method for your dynamically created elements
$(".brightness").on('change',function() {
alert("changed");
});
I think you are giving id brightness and Calling Onchange Event by Class using dot(.).
if the name of the id is brightness then
you should use #
$("#brightness").on('change',function() {
alert("changed");
});
but if you want call onchange event by class only then you need to add class to your input and use dot(.)
$('<input class="brightness" data-type="' + elementType + '" id="' + name +' " min=' + value1 +' max=' + value2 + ' value="127" >').appendTo("fieldset");
$(".brightness").on('change',function() {
alert("changed");
});
Related
to summarize my problem ... I have made a calendar with contains the from - to date range. Now the selected dates are displayed in a div with a delete button for each. But as the id of the button is the same for all the dates ....it deletes the entire date range. I have attached the screenshot as well.
I also tried taking a loop and giving each date a div so that the Del function will work properly. but I wasn't successful. I will mention code for the same
$(document).ready(function () {
var i = 0;
$.each(between, function (key, value) {
var rest = $('#target').append($('<div id="r' + i +value+ '" class="ansbox">
</div>'));
console.log(between);
var template = '<div id="ChildTarget_' + i + '"><span>key + ":" + "' + value + '"
</span><button id="tr' + i + '" class="target">X</button></div><br></div>';
i++;
$('#target').on('click', function () {
console.log("hola");
$('#target').remove();
You should add click event for the button itself.
var template = `
<div id="ChildTarget_' + i + '">
<span>key + ":" + "' + value + '"</span>
<button id="tr' + i + '" class="deleteButton">X</button>
</div>`;
$(".deleteButton').on('click', function() {
// do deletion here
});
First of all ,
The 'X' button should have different id
$.each(between, function (key, value){
$('#results').append(key+":"+value+'<br>');
$('#results').html(between.join('<button id="result"+key+"" > X </button><br>')
here you can see i am adding key to the Button Id making it unique. Use that id to remove the value, that you dont want. Hope this helps
I'm total beginner in jquery.
I tried this https://jsfiddle.net/0xLqhufd/2/
<body>
<div>
<input type="text" person="firstName" value="John">
<input type="text" person="birthDate" value="September 1st, 2000">
</div>
</body>
But I got only blank in alert :
$('input[person]').each(function(index) {
alert(index + ': ' + $(this).text());
}
);
As said on the jQuery documentation ...
The .text() method cannot be used on form inputs or scripts
Use .val() instead.
$('input[person]').each(function(index) {
alert(index + ': ' + $(this).val());
}
);
Working Demo
In void elements, using text() would be inappropriate. Use .val() instead. input[type=text] is a void element, that means it cannot have any child nodes inside of it including text nodes.
$('input[person]').each(function(index) {
alert(index + ': ' + $(this).val());
});
DEMO
input has .val() to read values
$('input[person]').each(function(index) {
alert(index + ': ' + $(this).val());//will read input value
}
);
I have a answer for your Doubt.
You have to change the Script which you have used as below.
$('input[person]').each(function(index) {
alert(index + ': ' + $(this).val());
}
);
Please update me whether you find my code is useful for you.
Hey you can use like this:-
input "type=text" tags have the values not text.
that's why you have to use .val() instead of .text().
$('input[person]').each(function(index) {
alert(index + ': ' + $(this).val());
});
I have created some select tags in javascript but now I want to customise the style with jQuery. The problem that I have is that I can't access the class of select tag. Does anyone have any idea why is this?
nextOneSelectorHtml =
'<select ' +
'class="dropdown" ' +
'id="dd" ' +
'data-selector-level="' + (currentSelectLevel+1) + '" ' +
'data-path="' + strPath + '" ' +
'onchange="onFsSelectChange(this)"' +
'><option disabled selected> -- select an option -- </option>';
....
Now if I am doing
$('dropdown').css( "background-color: #000000" );
there is no effect
You are missing a class selector . and change the format of argument passed in .css() method. First argument should be CSS property name and then next one should be its value:
$('.dropdown').css( "background-color", "#000000" ); //or .css({"background-color": "#000000"});
// ^^ Class selector needed
I am using javascript in my project.
I have on HTML table <table id='idDocList'> and I am doing append some html on this table as below code.
But I want to hide respective <tr> when user click on Delete anchor tag.
$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a onclick=deleteDocument(this,'" + file.name + "')> Delete</a></td></tr>");
How can i do this using Jquery?
The following example does not work
function deleteDocument(CurAnchorTag, fileName) {
$(CurAnchorTag).closest('tr').hide();
}
I don't want to use ID for <a> tag as I have many Documents.
As a quick fix, you can use like this,
$(CurAnchorTag).closest('tr').hide();
Replaced <tr> with tr
You can remove the inline function call with jquery like this way,
$("#idDocList").on("click", "td a", function() {
$(this).closest("tr").hide();
var filename = $(this).closest("td").prev().text();
});
I would suggest you to change your code to:
var newRow = $("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a href='#'> Delete</a></td></tr>").appendTo("#idDocList");
newRow.find( 'a' ).click( function( e ) {
e.preventDefault();
$( this ).closest('<tr>').hide();
});
You would better use event delegation and get rid of inline onclick handlers all together:
$('#idDocList').on('click', '.btn-delete', function() {
$(this).closest('tr').hide();
// read filename: $(this).data('filename')
});
And use it with HTML (the sting you append):
"<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class="btn-delete" data-filename='" + file.name + "'>Delete</a></td></tr>"
Note the part:
<a class="btn-delete" data-filename="filename">Delete</a>
you can just use
$(".delete_link").click(function(){$(this).closest('tr').hide();}
Jquery will use the this of which ever element called it. There will be no need for the onclick on the html file.
You recommend you to use event for a class using the jquery
$("#idDocList").append("<tr><td>" + file.name + "</td><td>" + sz + "</td><td><a class='delete_link'> Delete</a></td></tr>");
The code below will add the event and need to execute always after add a "tr", unless you use a delegate to this
$(".delete_link").click(function(){ $(this).closest("tr").hide() });
If you don't want to use a class you can use this
$("#idDocList td > a").click(function(){ $(this).closest("tr").hide() });
How can I call a function in javascript from the stringBuilder in VB.Net?
Code:
oSB.Append("<table id= '" + table_id + "' class='sortable' ><thead><tr><th class=border onclick='sort()'>" + "Name" + "</th><th class=border>" + "Duration" + "</th><th class=border>" + "State" + "</th><th class=border>" + "Party" + "</th><th class=border>" + "Year" + "</th></tr></thead>")
Is this a correct method?
Instead of using the outdated onclick attribute, you should assign you handlers via javascript/jQuery. This makes for a better separation of concerns.
First of all remove the onclick="sort()" from your code, and add this jQuery code to the page:
$(".sortable th:first").click(function() {
// do something...
});
you can remove the inline onclick event.. and use jquery click event instead
$(".sortable th:first").click(function() {
// do your stuff
});