We Keep Coding

jQuery Toggling next row in dynamically created table with dynamically created button

I have a jQuery dynamically created table that appends data from json file.
one of the rows of the table is a row of buttons that are appended into a row variable that is appended into the table:
var like = $("<a href='index.html'><button class='likeBtn'>like</button></a>");
var comment = $("<a href='index.html'><button class='comBtn'>comment</button></a>");
var toggle = $("<a href='index.html'><button class='togBtn'>show/hide comments</button></a>");
row3.append(like).buttonset();
row3.append(comment).buttonset();
row3.append(toggle).buttonset();
$("#table").append(row3);
now I need to toggle the row below in the table when clicking the toggle button.
this is my onclick function:
$(function(){
alert("in");
$('.togBtn').click(function() {
alert("in2");
$(this).closest('tr').toggle();
});
});
when I put alerts inside the click function I don't see them, I do see alerts from the function that holds the click function. for example- I see "in" but I don't see "in2".
and of course the row is not toggled.
commentRow is the class of the row that needs to be toggled.
I tried lots of options like-
$("#table").closest('.commentRow').toggle();
also with next() , All(), and many others and I can't get it to work!!!
please - your thoughts on this.
All help will be much appreciated!

It's due to the dynamically generated content, try that:
$(document).on('click','.togBtn',function(e) {
alert("in2");
$(this).closest('tr').toggle();
// or return false; // it does both preventDefault & stopPropagation.
});
This is called event delegation. This technique is only used when you have generated dynamic DOM nodes like as you are doing in your code.
So, in this case all the events were bound when page was initially loaded and the elements are generated after page load, due to that browser didn't registered any event for those elements because of unavailablity. In this case event has to be delegated to the static parent node or to the document itself because it is always available.
Syntax for event delegation using .on() method:
$(staticParent).on(event, selector, cb);

With the help of the answers posted here I found a solution that works:
$(document).on('click','.togBtn',function(e) {
alert("in2");
e.preventDefault();
$(this).parents("tr").next().slideToggle();
// or return false; // it does both preventDefault & stopPropagation.
});
Thanks all for your help!

How to add styles to a button that is created when clicking another button?

I have this button that is loaded whenever u click another button(so its not loaded on startup without me doing anything)
<button type='button' id='testbtn'
onclick='testfunction()' onload='testload()'
class='testbtnclass'>btn</button>
This is my function:
function testload() {
alert("onload worked");
/*what i want to archieve within this function later is to change the
css of the button but for now i just want to call this function onload of
the button, which it doesnt/*
}
My question is now, how can i/should i do to get this function to run whenever this button is loaded?

onload is not supported by button tag so you need to do it either as other answer telling or with
document.onload =function(){
//change the css of that button or call function you want
}

I believe you can create a css class example:
.buttonStyle{ background-color: red };
Then you can get your button and add this class
var button = document.getElementById("testbtn");
button.className = button.className + " buttonStyle";

using jQuery you can do just the following:
$( "button" ).addClass( "myClass yourClass" );

You could use event delegation of jQuery. With this technique, it doesnt matter if the button gets generated after DOM is loaded.
$('body').on('click', '.generated_btn', function() {
//here you can change css
});
Event delegation allows us to attach a single event listener, to a
parent element, that will fire for all descendants matching a
selector, whether those descendants exist now or are added in the
future.
More information: https://learn.jquery.com/events/event-delegation/

Passing specific value to modal from dynamic buttons

I have a few different modals on my page that need data passed into them. I solved that problem with this other question, which has me using jQuery now and was really helpful. This is what I have now:
$(document).on("click", ".edit", function () {
$(".modal-body #value").val($('.edit').data('id'));
});
My problem is that since my page has dynamically created buttons (from a foreach based on the model), no matter which button I click, this gets the value from the first button. How do I instead get the value from the button that was clicked.
I thought about giving them all separate ids, but I don't want to make a function for each id. I read that there is a data property to this .on method, but I can't find a good example of how to use it and if it would work in my case.
If anyone has any suggestions I would be very grateful. Thank you!

$(document).on("click", ".edit", function () {
// Use $(this) to reference the clicked button
$(".modal-body #value").val($(this).data('id'));
});

You can reference the button being clicked by using the this keyword. Try the following:
$(document).on("click", ".edit", function () {
$(".modal-body #value").val($(this).data('id'));
});

Use Bootstrap's events:
$('#your-modal').on('show.bs.modal', function (e) {
var btn = $(e.relatedTarget);
var id = btn.data('id');
$("#value").val(id);
});
See the "Events" section of http://getbootstrap.com/javascript/#modals :
[The show.bs.modal event] fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

click event not working jQuery

I am trying to handle the click event using jQuery
on upload success, I am creating the following using jQuery:
$("#uploadedImage").append( "<div class='img-wrap'>
<span class='deletePhoto'>×</span>
<img data-id='"+files[i]+"' src='"+asset_url+"uploads/ad_photo/"+files[i]+"'>
</div>
<span class='gap'></span>");
and for handling click event for the above created div's I have written this:
$('.img-wrap .deletePhoto').click(function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
the above code is working properly and creates all div, but when I click on the deletePhoto span. no jQuery alert is showing.
Any help or suggestion would be a great help.
Thanks in advance

delegate the event and change as suggested:
$("#uploadedImage").on('click', '.deletePhoto', function() {
You have to delegate your event to the closest static parent #uploadedImage in your case which is available on the page load like the container which holds the newly appended div and image.
although $(document) and $(document.body) are always available to delegate the event.

It is better to use on() when you create new element after DOM has been loaded.
$(document).on('click', '.img-wrap .deletePhoto', function() {
});

You are creating your element dynamically that is why you would need .live()
but this method is deprecated in newer version.
if you want to use jquery 1.10 or above you need to call your actions in this way:
$(document).on('click','element',function(){
`your code goes in here`
})

try this:
$(".img-wrap .deletePhoto").on('click', function() {
});

You can change a little in your code.
$(".deletePhoto").off("click").on("click",function(){
//Your Code here
});

First check in debugging mode that you get length when your code is going to bind click event and another thing bind event must written after that element is appended.
And Also check css of your element (height and width) on which you are clicking and yes
$(document).on('click','Your Element',function(){
//your code goes in here
});
Will works fine

use delegate:
$('#uploadedImage').on('click','.img-wrap .deletePhoto',function() {
var id = $(this).closest('.img-wrap').find('img').data('id');
alert(id);
});
see details delegate and .on here

jQuery - trigger a custom event on a link

I am trying to run this custom 'getOffer()' event using jQuery
<img src="images/img.jpeg">
I have tried the following but it doesn't seem to work (I am using the Firefox Firebug console.log window)
$('a[title="Submit for offer"]').trigger('getOffer');
This is the page I am trying this on: http://bit.ly/1dpIMFk
Can anyone suggest any ideas?

<img src="images/img.jpeg">
$(document).ready(function(){
$('a[title="Submit for offer"]').trigger('getOffer');
});
function getOffer(){
alert('link clicked');
}
Seems working fine for me.I think you didnt wrapped your event trigger in document ready.
DEMO

You can use
<img src="images/img.jpeg">

Creating an custom event on jQuery
First add some identifier (id/class) to your link
<a id="linkOffer" title="Submit for offer"><img src="images/img.jpeg"></a>
Then, create your CUSTOM event.
//The function that will to the getOffer things
function getOffer() {
//Do get offer...
}
$(document).ready(function(){
//Custom event pointing to the function
$('a#linkOffer').on('getoffer',getOffer);
//Default click event
$('a#linkOffer').on('click',function(e){
//Do click stuff.
//Trigger your custom event.
$(this).trigger('getoffer');
//If you wish to not move the page, prevent the default link click behavior (moveing to other page)
e.preventDefault();
});
});

Trigger will not function because it search click attribute in element. Work around for this can be is:
Add click attribute to the element and then call the jquery function.
<button value="yu" onclick="getOffer();"/>
<script>
$("a[title='Submit for offer']").attr("onclick",$("a[title='Submit for offer']").attr('href')); // get value from href
$("a[title='Submit for offer']").trigger('click');
function getOffer()
{
alert('j');
}
</script>