We Keep Coding

Binding jQuery .on event to dynamic button with dynamic id

I have a situation where I need to bind an onclick event to a button which is being dynamically injected into the main html document by an external JavaScript.
The problem is that that the class id of the button is suffixed with some dynamic numbers which change every time the page is reloaded.
Please see example:
<button class="clickme12345" type=submit value=clickme>send</button>
Now the situation is that on every page reload the numbers for the class id for the button will change so next time it will be clickme67890.
Would there be any way to get the jQuery binding to work for this situation?
Any reply would be greatly appreciated.

If this is really how you want to use it, you could use an attribute selector
Something like [attr*=value] where the attr contains the string value.
For example (in jQuery):
var $btnElement = $('[class*="clickme"]');
The above will select any elements that have a class attribute containing clickme

How to delete HTML Elements in an iFrame using JavaScript

I have an iFrame and a div with content in it. I want to delete the div via JavaScript, is that possible and how could I do that?
I don't want to just not display it (eg. display: none via CSS) but remove it from the HTML of the site. I have basic knowledge of JavaScript but don't have any experience working with an iFrame.

You can use
$("#iFrameId").contents().find("#yourDiv").empty();
It is better to use remove()
example: $("#iFrameId").contents().find("#yourDiv").remove();
Explanation
empty() will remove all the contents of the selection.
remove() will remove the selection and its contents and all the event handlers associated with it.
For reference:
http://api.jquery.com/remove/
http://api.jquery.com/empty/

You can try something like:-
frame.removeChild(//pass div id here);

using jQuery to change, only the elements that were loaded via ajax

For each checkbox on the web page, I replace it with a slider that I borrowed from jsfiddle.net/gnQUe/170/
This is done by going through the elements when the document is loaded.
Now the problem is that when more content is loaded via ajax, the new checkboxes are not transformed.
To solve the problem, I used AjaxComplete event to go through all the elements again and replace the checkboxes with sliders.
Now the problem happens that elements that were already replaced, get two sliders. To avoid that I check if the checkbox is hidden and next element is div of class "slider-frame", then don't process the re-process the element.
But I have a lot of other such controls as well, and I am presume I am not the only one that has this problem. Is there another easy way around it?
There exists jQuery live/on( http://api.jquery.com/on/ ) event but it requires an event as an argument? whereas I would like to change the look of my controls when they are rendered.
Another example of the same problem is to extend some controls that are loaded via ajax with jQuerys autocomplete plugin.
Is there a better way to accomplish this other than changing some attributes on the element.
To summarize, on document load I would like to process every element in DOM, but when more elements are loaded via ajax then I want to change only the new elements.

I would assume that when the element's are transformed into a slider, a class is added to them. So just add a not clause.
$(".MySelector").not(".SomeClassThatSliderAddsToElement").slider({});
So in the case of your code do something like this
$('.slider-button').not(".sliderloaded").addClass("sliderloaded").toggle(function(){
$(this).addClass('on').html('YES');
$('#slider').val(true);
},function(){
$(this).removeClass('on').html('NO');
$('#slider').val(false);
});
Since you said you do not want to add anything else, how about you change the toggle function to click.
$(document).on("click", ".slider-button", function(){
var elem = $(this);
elem.toggleClass("on");
var state = elem.hasClass("on");
elem.text(state?"YES":"NO");
elem.parent().next().val(state);
});
Running fiddle: http://jsfiddle.net/d9uFs/

onclick event on Ajax output

Hi i am using Ajax to get a SELECT tag. I mean, if i click on a button it will generate a SELECT tag inside HTML, i have different outputs for different options of select.
I need an onclick event on that SELECT tag, i tried using JQuery
$('#id').click(function() {
alert('test');
});
Its not working. Can anybody help, please

Because the select tag is dynamically added to the HTML after the event was set, the event is not set on the select tag.
A simple solution is to use live() here:
$('#id').live('click', function() {
alert('test');
});

as you are dynically generating html use live instead of click
$('#id').live('click', function() {
// Live handler called.
});

Make sure
you have jQuery script file is inserted in your html page,
you have assigned id id to one and only one item on your page,
you give us a link to see your page if nothing else helps. :)

live is now deprecated. Use on instead.

Using jQuery on dynamically added content

I am newbie to jQuery and javascript. In my application I have a list of users. When a particular user is clicked from the list, a div element is replaced with details about the user dynamically. When another user is clicked, again I replace the same div element with this user details. So at a time only one user details can be seen.
I use jquery, so my code to the above description looks like.
$('table#moderate_users tr').click(function() {
$.get('/moderate/user/'+uid, function(data){ $('div.user_info').html(data);
});
});
This works perfect and the content is inserted dynamically.
I have a dropdown(html select tag) in the dynamically added content. So I get the dropdown only when i click on a user from the list and it changes repectively when I click on another user. I wanted to find the value of the select tag using jquery whenever it is changed. So I wrote
$('select#assign_role').change(function(){
alert(this.val());
});
Since this dropdown is added after document.ready, adding this script inside document.ready function never worked. I also tried to insert the above script along the with the user details which is dynamically added.For my surprise this script is not inserted into the document at all, while the rest of the HTML content are inserted perfect. I am not aware if i can add insert javascript after the document has loaded. I am not aware how i could use jQuery to find out the value of the select tag which is added dynamically.
Thanks.

you want jQuery's "live" functionality:
$('select#assign_role').live('change',function(){
alert($(this).val());
});
also notice I changed alert(this.val()); to alert($(this).val()); considering that this inside a jQuery event handler references the actual dom element, not a jQuery object.

From the looks of your code, it seems that you are inserting a chunk of HTML into that div. So even if you wire your event to the dropdown after the page load, it will not work, since all of your event binding will be ignored when you insert new HTML code into div.
Try moving your code inside the function that inserts HTML. Something like this:
$('table#moderate_users tr').click(function() {
$.get('/moderate/user/'+uid, function(data){
$('div.user_info').html(data);
$('select#assign_role').change(function(){
alert(this.val());
});
});
});

On IE the live function doesn't work for onchange on <select> elements.
http://www.neeraj.name/blog/articles/882-how-live-method-works-in-jquery-why-it-does-not-work-in-some-cases-when-to-use-livequery
You will need to either add the select then do a setTimeout and then bind with the jquery.bind type of functionality, or, what I have done, is when you create the element then just set the onchange event handler there directly.
If you don't need to support IE then the live function works great.