We Keep Coding

Function click with buttons in datatable

Im loading a table with DataTables. In each row i creat a button to click, and the value automatically insert into an input in the opener windows. The function i use is this:
$("button").click(function() {
var id = $(this).val();
window.opener.document.getElementById('cliente-nombre').value = id;
window.parent.close();
});
The function is not working with the buttons loaded in the datatable. If i create a button wich load with the page (not when the page is fully load) its works without problem.
I supose this dont work because they are created when the page is fully loaded,

When dealing with elements loaded in after page load, delegate the event handler via on() to a parent element to ensure they respond to the click.
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document. The
document element is available in the head of the document before
loading any other HTML, so it is safe to attach events there without
waiting for the document to be ready.
Here I use the document object:
$(document).on('click', 'button', function() {
var id = $(this).val();
window.opener.document.getElementById('cliente-nombre').value = id;
window.parent.close();
});

Try wrapping it in a $(document).ready. This will wait for the page to load before running the code.
$(document).ready(function() {
$("button").click(function() {
var id = $(this).val();
window.opener.document.getElementById('cliente-nombre').value = id;
window.parent.close();
});
});
That way your buttons will be on the DOM before attaching the click handler.

jQuery - bind function to button within xhr output

I output some information with xhr request. On this output I also have a button. I want to bind a function (send e-mail) to it, but for some reason I can't.
Obviously I have included jQuery and I do not get any errors in console. I tried few options already!
button html:
$(document).ready(function(){
$('#sendraportemail').click(function(){
var uroemail = $('#uroemail').val();
console.log(uroemail);
});
});
(function() {
$('#sendraportemail').click(function(){
var uroemail = $('#uroemail').val();
console.log(uroemail);
});
});
$('.sendraportemail').click(function(){
var uroemail = $('#uroemail').val();
console.log(uroemail);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary sendraportemail" id="sendraportemail">SEND E-MAIL</button>
I tried binding with $('#sendraportemail') or $('.sendraportemail'). What do I do wrong? Help highly appreciated.

You need to use delegated event binding which is necessary for capturing events on elements that are dynamically added after document.ready:
$(document).ready(function(){
$(document).on('click', '#sendraportemail', function(){
var uroemail = $('#uroemail').val();
console.log(uroemail);
});
});
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
Source: https://api.jquery.com/on/

How can I use jquery on a html document which has been loaded into another html document?

I have a heading.html file that is being loaded into my index.html.
heading.html
<header id="header">
<div class="logo"></div>
<nav>
Home
About Me
Why Me?
Contact
</nav>
</header>
Then in my javascript file where I am loading in this file, it doesn't let me do any other functions.
functions.js
$( document ).ready(function() {
$(function(){
$("#includedHeader").load("/assets/_includes/header.html");
});
$(function(){
$("#includedFooter").load("/assets/_includes/footer.html");
});
$(function(){
$("#includedWhyme").load("/assets/_includes/why-me.html");
});
$(".slide-section").click(function(){
alert('clicked');
});
});
As you can see I'm trying to make a alert popup just to test if it is working but it doesn't.
Is there a way where I can still use other functions on these html files that are being loaded.

When you're binding the event like this $(".slide-section").click(), the element is not there yet. The .load() is still grabbing the contents from the server.
You can, however, use on method in the document (delegated events). It does a live event attachment (the event will be catched even if the element only exists in the future).
From the .on() docs:
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document.
Another suggestion (if I might) is to remove $(function(){} from around your load calls. $(handler) is a shorthand for $(document).ready(handler). So, as if you're calling it once, you don't need them anymore.
So, my suggestion would be something like this:
$( document ).ready(function() {
$("#includedHeader").load("/assets/_includes/header.html");
$("#includedFooter").load("/assets/_includes/footer.html");
$("#includedWhyme").load("/assets/_includes/why-me.html");
});
$(document).on("click", ".slide-section", function(){
alert('clicked');
});

Don't Use directly click() method.. it would not work if the content is not already in the document..instead of this use .on() method to specifie click method its delegate have the advantage that they can process events from descendant elements that are added to the document at a later time.
so i from my point of view use following-
$(document).on("click", ".slide-section", function(){
alert('clicked');
});

Click function not working in .each() function

I want to use click() as eventhandler and that event handler is not working you can see code below
$('.ajax-close').click(function( event ){
event.preventDefault();
alert('hi');
$( '.ajax-live-on' ).removeClass('ajax-live-on');
});
I have used all the code to initialize the jquery no problem , all right. But this piece of code not working
Here is the jsBin link
http://jsbin.com/doxeravizo/1/edit?html,css,js,output

The $('.ajax-close') collection doesn't contain the elements taking that class after the binding.
Change
$('.ajax-close').click(function( event ){
to
$(document.body).on('click', '.ajax-close', function( event ){
You should also move that binding outside of the loop, there's no reason to do it at every iteration.
Note also that in order to have your span clickable, it must have some content.
Demonstration (I added the jQuery library to make the fiddle work)

I'm guessing that because you're using ajax, your .ajax-close is not created when the event listener is being created.
You're going to want to delegate your click function:
$(document).on('click', '.ajax-close', function(event) {
event.preventDefault();
alert('hi');
$('.ajax-live-on').removeClass('ajax-live-on');
});
This article will help, but just for reference, this bit in particular:
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

One option is to listen on the click event using a delegate, like so:
$(document).on('click', '.ajax-close', function( event ){
//your code
});
Another option might be to move your click listener inside the original click listener, which creates the "Close" button, while the reason the issue arises is that the click event on "ajax-close" is bound too soon (before the <span> is appended to the DOM even):
ajaxcontent.click(function(event) {
event.preventDefault();
$( '.ajax-live' ).addClass('ajax-live-on');
$( this ).after('<span class="ajax-close animated bounceInRight">Close</span>');
$('.ajaxshow').append().load(ajaxUrl);
$('.ajaxshow').addClass('animated bounceInUp');
// Move this section here, which was previously located below
$('.ajax-close').click(function( event ){
event.preventDefault();
alert('hi');
$( '.ajax-live' ).removeClass('ajax-live-on');
});
});
Make sure to include some content in your "ajax-close" span to be able to click it like the word "Close".

Add JQuery library to your HTML head :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

In your given link you are adding element dynamically, so need to use event delegate for dynamically created elements event binding.
$(document).on('click', '.ajax-close', function( event ){
//your code
});

How to attach events to a colorbox popup in backbone?

I'm having a lot of issues with events triggering in my colorbox popup. Currently, there is a backbone view taking care of a user profile page. There is a gallery of photos, that when clicked, opens a colorbox that contains the photo, as well as comments, comment input form, and like buttons.
The html I put into the colorbox is a hidden div on the template itself. Everything displays just fine, but clicking things don't trigger anything. I figured I would try to attach the event handlers to the html I pass into the colorbox function, since I'm guessing the pop up colorbox is not considered to be in the backbone view's dom. The function is below, which the Backbone view triggers of a click event on an img. The var photoBox is the html I want to be displayed in the colorbox. I tried to attach event handlers to the photoBox, but to no avail.
popColorbox: function(event) {
var photoID = $(event.currentTarget).parent().attr('data-id');
var photoBox = $("#inline_example" + photoID).parent().html();
$(photoBox).on('click', '.unlike', function(){
console.log("hello");
alert("hello");
});
$(photoBox).on('click', '.like', function(){
console.log("hello");
alert("hello");
});
$.colorbox({html: photoBox});
}

Your first assumption as to why the events aren't being triggered is correct. In backbone view's the events are delegated to their root el, as such since the colorBox's elements are not children of the view's el its events aren't being triggered.
The reason why your events aren't being fired when you try binding directly to the photoBox I think is because the colorBox plug-In expects a string of html which it uses to build up it's html (as opposed to just attaching the nodes you pass in).
In order to trigger your events you will need to bind them to some existing higher element on the DOM, in this case you might need to go up to the document.
$(document).on('click', '.unlike', function(){
console.log("hello");
alert("hello");
});
$(document).on('click', '.like', function(){
console.log("hello");
alert("hello");
});

Maybe here the event listener is added on html rather than a selector. Please look at jQuery documentation on adding an event listener. http://api.jquery.com/on/