Develop Reference

What is the proper way of binding REMOVE event listener to dynamically created elements in JQuery

My goal is to perform a certain operation each time an element with a certain id or class is deleted from DOM. Prior to this, I've been successfully using a standard syntax for binding click events on dynamically created elements like this:
$(document).on('click', '.someClass', function(e) {
alert("Div was clicked");
});
Inspired by this post, I tried to do the same thing for REMOVE event listener, and failed.
Here is my jsFiddle.
Any hints on how to make this work? And maybe what I am trying to do is fundamentally wrong, and I should come up with some entirely different logic ?
http://jsfiddle.net/wphtjw1o/

This is the functionality of Jquery UI script, so you have to include two scripts Jquery and Jquery UI to make it work.
$(function() {
$('<div id="DivToBeRemoved">DIV TO BE REMOVED</div>').prependTo('body');
$("#DivToBeRemoved").on("remove", function () {
alert("Element was removed");
});
$(document).on('click', '#DivToBeRemoved', function(e) {
alert("Div was clicked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<button onclick="RemoveDiv();">Click here to remove div above</button>
<script type="text/javascript">
function RemoveDiv() {
var d = $("#DivToBeRemoved");
d.remove();
}
</script>

If I got you correctly, you trying to write custom event (remove event in your case).
For calling custom event you don't need any library, you need to trigger that event, like so:
function RemoveDiv() {
var d = $("#DivToBeRemoved");
// d.remove();
d.trigger('remove'); // <--
}
Read more about trigger: .trigger()
Also check this question here on SO: Custom events in jQuery?
jsfiddle

checkbox change event not working

i'm Trying to include an onclick event for a checkbox in my laravel application
This is my Input Section
<input type="checkbox" id="early_access" name="early_access">
And the function
$(document).ready(function() {
$('#early_access').change(function() {
alert("booyah");
});
});
The function is not working ..

Guys i found the problem and solved it
Unfortunately the frontend designer had some other function running for changing the style of checkbox and it was inherited from the master layout ...
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
});
this was running instead of my script :( .. when i removed it everything worked

Have you checked if your jquery was loaded?
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
Use on
$(document).ready(function() {
$('#early_access').on("change", function() {
alert("booyah");
});
});
If you can, I suggest that you use your selector #early_access as an argument.
$(document).ready(function() {
$(document).on("change", "#early_access" function() {
alert("booyah");
});
});
It might not be relevant with an id but if you use a class based attribute and you dynamically change the DOM, it will still be responsive. But that might be beyond the point of your question.

Your code is absolutely fine see this fiddle
https://jsfiddle.net/avinash8526/nL1crxn0/1/
$(document).ready(function() {
$('#early_access').change(function() {
alert("I will only work with check uncheck");
});
});
Further you have onchange event applied, hence this alert will only work if you check/uncheck this box

click on a link using jQuery on page load

I have a link with a script in that opens a view of products. I don't have access to the html, and I need to have this view open on default. Until the behavior is fixed the correct way, which will take long time unfortunaly, I want to automatically make the link click on pageload.
I tried with the script below first - but since the link itself triggers a pageload, this obviously just keeps firing over and over again.
So how do I do this with jquery or vaniall JS, is this even possible?
Script:
$(document).ready(function () {
$('.action')[0].click();
});
My link:
Toon alle

$(document).ready(function () {
$('.action:first').trigger("click");
});

to manually trigger an event u need to use trigger() ,click is to only assign a handler
$(document).ready(function () {
$('a.action').click(function(){
... handler code
});
$('a.action').trigger("click");
});

The click() method triggers the click event.
Syntax :
Trigger the click event for the selected elements:
$(selector).click();
http://www.w3schools.com/jquery/event_click.asp (example)
In your case :
$(document).ready(function() {
$('.action:first').click();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Toon alle
Edit :
If you don't want to trigger in a specific page. do like this.
$(document).ready(function () {
if (!location.href.indexOf("someurl") > -1)
$('.action:first').click();
});

Can you tell me why you add [0], if you need to add it for first element then use following code :-
$(document).ready(function () {
$('.action:first').trigger("click");
});
otherwise you can directly use these :-
$(document).ready(function () {
$('.action').trigger("click");
});
Change your link tag with following :-
Toon alle

Trigger click after load page

I'm working with a wordpress theme and I need to activate a button when the page loads, but none of the following has worked for me (my button has the ID "reset"):
$(document).ready(function() {
$("#reset")[0].click();
});
--
$(document).ready(function(){
$("#reset").click();
})
--
$(window).load(function(){
$('#reset').click();
});
I put the code in the header or in the page where i need to activate the button, but does not work.
Thanks!

I give you example here
$(document).ready(function(){
$("#reset").click();
})
the code above should work.

JavaScript does not allow seamless programmatic triggering of an actual click event.
What you could do is
declare the click callback as a separate, named function
e.g.
function myClickCallback(e) {
// Do stuff here
}
Set this as the click callback of your button (e.g. $('#reset').on('click', myClickCallback)).
Invoke the callback when the page loads (e.g. $(document).ready(myClickCallback);)
I am not sure why you 'd want this functionality, since it sounds weird. From reading your description, by "activating", you could also mean enabling the button. To do that you should do something like the following
$(document).on('ready', function (e){
$('#reset').removeAttr('disabled');
});

You may need to refer to it using jQuery instead of $:
The jQuery library included with WordPress is set to the noConflict() mode...
https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

$(document).ready(function(){
$("#reset").trigger('click');
});

Use the function Trigger with the event click
$(document).ready(function(){
$("#reset").trigger('click');
});

This what works for me:
$(function () {
$('#btnUpdatePosition').click();
});
On the button event, the JQuery binding event doesn't work:
$('#btnUpdatePosition').click(function () {
alert('test again');
});
But it works when I added the event on attribute declaration:
<input type="button" value="Update" id="btnUpdatePosition" onclick="alert('Click has been called')" />
You can also call if you have a function on element:
<input type="button" value="Update" id="btnUpdatePosition" onclick="fncShow();" />

jquery link not working when added client side

I've got the following link in my page,
<a href="#dialog" name="delete" data-id="75351" id="delete-75351" >Delete</a>
In my page script, I've defined the following.
$(document).ready(function () {
$('a[name=delete]').click(function (e) {
alert('Delete Clicked');
});
});
My links all work fine using this. However, there are times when I need to dynamically add a link. I use this jquery to add the link to a cell in a table.
var actionCell = $('#itemlist').find(rowId).find(actionCellId);
$('<a>Edit</a>').attr({ 'id': 'edit-' + response.id, 'href': '/Item/Edit/' + response.id }).appendTo(actionCell);
//This line doesn't work. Doesn't get registered with JQuery
$('<a name="delete">Delete</a>').attr({'id':'delete-' + response.id, 'href':'#dialog','data-id':response.id}).appendTo(actionCell);
So here I add two links. The Edit link calls a method on my MVC3 Controller. The second one, Delete, needs to function like the others and have it's click event handled in the jquery function found at the top of this post.
Both the links are created the way they should, and the Edit link works, but the delete link's click event is never handled by my javascript method.
UPDATE
I applied the solution suggested here, but it's not working. My jquery now looks like this.
$(document).ready(function () {
//select all the a tag with name equal to reject
$('a[name=delete]').on('click', function (e) {
alert('Delete Clicked');
});
});
I did notice though a difference in the link I added and the identical links added at page load.
Here is the link I added via jquery
<a name="delete" id="delete-75641" href="#dialog" data-id="75641">
Here is a link added when the page loaded.
<a name="delete" id="delete-75642" href="#dialog" data-id="75642" jQuery17008581920570114187="3">
What is the jQuery17008581920570114187="3" ??
Here is how I define the link in my page. (Actually a view using MVC3 and Razor)
<a href="#dialog" name="delete" data-id="#item.ItemID" id="delete-#item.ItemID" >Delete</a>

The click method only binds a click event handler to elements that exist at the time you call the click method. Try the on or live method, instead.
For example, if you are using jQuery 1.3.x - 1.6.x, use the deprecated method live:
$(document).ready(function () {
$('a[name=delete]').live('click', function (e) {
alert('Delete Clicked');
});
});
If you are using jQuery 1.7 or later, use the new on method:
$(document).ready(function () {
$('body').on('click', 'a[name=delete]', function (e) {
alert('Delete Clicked');
});
});

If using jQuery 1.7+ replace the click event with the on() method.
$(document).on('click', 'a[name=test2]', function (e) {
alert('Delete Clicked');
});
EDITED: per dgvid comment!