Develop Reference

How to convert jQuery to JavaScript name attribute

I'm trying to find a way to create 'on click' events for dynamically generated buttons in JS. I know that in jQuery it can be done like this:
$(document).on('click', 'name=[buttonName]', function() {});
I know the e.target method in JS, but I'm wanting to find a way to do it with a name attribute instead.
Thanks

Firstly that line of jQuery isn't quite right as the square brackets are in the wrong place:
$(document).on('click', '[name="buttonName"]', func);
To achieve the same in plain JS you would need to attach a click event handler to a static parent element, then check the name property of the clicked element:
document.addEventListener('click', function(e) {
if (e.target.name == 'buttonName') {
// do something...
}
});
document.addEventListener('click', function(e) {
if (e.target.name == 'buttonName') {
alert('Hello!');
}
});
<button>I do nothing!</button>
<button name="buttonName">I say hello!</button>

You can use querySelector in a similar way than you would in jQuery, and attach the event listener whenever a new element is added to the DOM.
document.querySelector("button[name='buttonName']").addEventListener("click", function(){
alert("Hello, World");
});
<button name="buttonName">Click me</button>
The difference to the original jQuery code is that in that example it listens to events on the document whereas this does not.

You can use getElementByName to add click event to your button which is dynamically render
document.getElementByName("ButtonName").addEventListener("click", function(e) {
});

Draw a datatable when document.ready

Is there a way to automatically dra a datatable, after document.ready?
It means, draw the datatable without make an action such as changing the sorting, filtering or paging?
This how actually I'm doing it, but it just works util I make one of the actions mentioned, and I need to do it whithouth that action. It is possible?
$(document).ready(function(){
var table = $('#dataTable').DataTable();
// Event listener for DT 1.10+
table.on('draw', function() {
$(".auditButton.Submitted").removeClass('btn-outline-primary');
$(".auditButton.Submitted").addClass('btn-outline-success');
$(".auditButton.Expired").addClass('btn-outline-danger');
$(".auditButton.Capturable").addClass('btn-outline-warning');
});
});
Using body.onload
$(document).ready(function(){
$(document).on('load','body *',function(){
$(".auditButton.Submitted").removeClass('btn-outline-primary');
$(".auditButton.Submitted").addClass('btn-outline-success');
$(".auditButton.Expired").addClass('btn-outline-danger');
$(".auditButton.Capturable").addClass('btn-outline-warning');
});
});

Yes you can. At the moment of the load body.
body.onload = function(){myScript};
or onload on other object:
object.onload = function(){myScript};

I gave you an example, I let you adapt it.
$( document ).ready(function() {
$('#test').text('Insert text after on load webpage!');
});
https://jsfiddle.net/NicolasLsn/whvoa7yg/14/

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

how to handle click event on dynamic content?

i have this HTML code on a page when my page loaded:
<div class="divmain">Add
<span class="spn">123</span>
</div>
when you click on that span it will create another span and show hi alert to you,
when the page loaded for the first time it works fine and write another span on that dive as the same the old span but after that if you click on the new span it works not.
i did some test and found if i add this code :
$('.spn').on("click", function (e) {
showalert(this);
});
on the "spanwriter" function it will works , i mean if that function be like this:
function spanwriter(master) {
var rows = '<span class=\'spn\'>123</span>';
$('.divmain').html(rows);
<------- this event must be add here until it --------------->
$('.spn').on("click", function (e) { works
showalert(this);
});
}
why i should add click event at the end of wrote content until span can get that event and works?
i used jquery-1.10.2.js on my sample
my all codes are:
$(function () {
$('.divmain').on("click", function (e) {
spanwriter(this);
});
$('.spn').on("click", function (e) {
showalert(this);
});
});
function spanwriter(master) {
var rows = '<span class=\'spn\'>123</span>';
$('.divmain').html(rows);
}
function showalert(master) {
alert("hi");
}

you have to do the same but with document.on("click")
$(document).on("click", ".buttonClass", function() { console.log("inside"); });
$('.divmain').on("click" make a kind of binding when document is loaded, so when you add dynamix elements to the dom it is noit catched. Whith the use od document.on, it works even if you add dynamic content to the document.

The simplest and best solution to your problem is to attach the event listener to a parent element in the dom and pass the second parameter of the on() method as described in the jQuery documentation (http://api.jquery.com/on/)
In other words you should have something along the lines of:
$('body').on("click", ".spn", function (e) {
showalert(this);
spanwriter(this);
});
and then have the spanwriter() add the new span to the parent of the element it's been called upon.
I hope this is what you were looking for and answers your question.

make javascript function form specific

I have some jquery/javascript code that alters some things on document ready and when a form input is changed. How do i make this form specific?
$(function() {
$('input[name="item_price[]"]').live('change', function () {
var tr = $(this).parent().parent();
CalculateData(tr);
});
If my form's id tag is "my_form", how do i make this little snippet occur only if item_price[] in the "my_form" is being changed and not all instances of the item_price[] input?

use the selector code like this $('#my_form input[name="item_price[]"]') instead

Simply add the id selector, #my_form, to your existing selector:
$('#my_form input[name="item_price[]"]').live('change', function () {
var tr = $(this).parent().parent();
CalculateData(tr);
});
Additional Information:
jQuery selector reference: http://api.jquery.com/category/selectors/

add #my_form to the jquery selector
$('#my_form input[name="item_price[]"]').live('change', function () {
var tr = $(this).parent().parent();
CalculateData(tr);
});

You can use delegate in the following way to attach the event handler to the form element. This has the added advantage of jQuery not having to process unrelated events (i.e. ones that originated from outside of the form).
$('form#my_form').delegate('input[name="item_price[]"]', 'click', function() {
...
});