Develop Reference

I have a html page that loaded in div tag in another page using ajax call I want to trigger javascript functions on loaded page?

The main problem is the loaded html page contain loop of cards each card has checkbox I need trigger javascript function that check if checkbox selected then change text value in card to from select to selected, But the function I wrote to trigger this checkboxes not work?
My checkbox tag from the appended html page:
<div class="body-action-button u-flex-center">
<div><input type="checkbox" style="float: left;" name="companies[]" value="<?php echo $company->id; ?>" id="cbtest<?php echo $company->id; ?>" />
Request an offer</div>
</div>
javascript function I used to trigger checkbox :
$('.body-action-button').click(function(){
alert('selected');//This alert for testing
});

You can try to give a class to your checkboxes like
<input type="checkbox" class="cbxTest" style="float: left;" name="companies[]" value="<?php echo $company->id; ?>" id="cbtest<?php echo $company->id; ?>" />
and add your event to JQuery like that:
$(document).ready(function () {
$(".cbxTest").click(function () {
if (this.checked) {
alert("Selected");
}
});
});
Also if you want to not trigger it on click but only when checked you can also use .check instead of .click like that
$(document).ready(function () {
$(".cbxTest").change(function () {
if (this.checked) {
alert("Selected");
}
});
});
Both works well. It's just about the scenerio...

Try this (fiddle):
JS
$('input:checkbox[name=example]').each(function() {
if (this.checked) {
alert("selected");
}
// else {}
});
HTML
<input type="checkbox" name="example" /> label one
<input type="checkbox" name="example" checked/> label two

get item from multiple inputs with jquery which have the same name

I am listing items via table then want to change individual names of items.
<td class="tdFileName">
<?php $nameArray = explode(".", $f->file_name); ?>
<input type="text" name="ra_name" class="raName" value="{{$nameArray[0]}}">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td>{{$userName}}</td>
$('.btnRaName').on('click', function (e) {
e.preventDefault();
alert($('.raName').val());
location.reload();
});
When I click the individual button I only get first input's value. How can I fix that?

On click you need to pick the prev HTML element as it will be the desired input field:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var txt = $(this).prev('input.raName').val();
console.log(txt);
location.reload();
});

You need to use DOM traversal to get only the .raName element thats related to the clicked button. Try this:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).closest('td').find('.raName').val();
console.log(raName);
});

Select the element relative to your clicked element using sibling()
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).siblings('.raName').val();
console.log(raName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="the value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="another value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
</table>

Get tag attribute in Onclick event

<div style='padding:10px;border:1px solid #888;width:150px;' id='btnTest' data-id='1'>
<label>
<input type='checkbox' name='test1' />
TEST1
</label>
<label>
<input type='checkbox' name='test2' />
TEST2
</label>
</div>
<script>
$(function() {
$('#btnTest').click(function(e){
console.log($(e.target).attr('data-id'));
})
});
</script>
In that test code, if I click the label area, I can not get the data-id value,
Is there any way I can get the data-id even I click the other element in that DIV tag?

$(this).attr('data-id');
e.target refers to the element clicked, this to the element where the handler is binded.

Use 'this':
$(function() {
$('#btnTest').click(function(){
console.log($(this).attr('data-id'));
})
});
However if you want the checkbox's 'name':
Do:
$(function() {
$('#btnTest label input').click(function(){
alert($(this).attr('name'));
})
});

Yes you can simply do:
$(function() {
$('#btnTest').click(function(e){
console.log($(e.target).parent('#btnTest').attr('data-id'));
})
});

how to add and remove div using jquery

I'm making a scenario where user will be able to add a new row with "Remove" option by clicking "Add" button. If they click "Remove" button, the entire row will be deleted. I've put script for it. But, it's not working perfectly. Kindly, take a look on my fiddle: http://jsfiddle.net/learner73/gS8u2/
My problem is:
(1) If user click "Add" button, a new row will be added. That's good. But, it's gone below the "Add" button. I want, the new row will be added above the "Add" button, I mean "Add" button should be always at the bottom.
(2) At my code, if user click "Remove" button on the previously created row, the entire row will be deleted. That's good. But, when they click "Remove" button on dynamically created row, nothing will happened!
HTML:
<div class="optionBox">
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<span class="add">Add Option</span>
</div>
</div>
jQuery:
$('.add').click(function() {
$('.optionBox').append('<input type="text" /><span class="remove">Remove Option</span>');
});
$('.remove').click(function() {
$(this).parent('div').remove();
});

You need to use event delegation on your remove link code:
$('.add').click(function() {
$('.block:last').before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$('.optionBox').on('click','.remove',function() {
$(this).parent().remove();
});
jsFiddle example
Also, you weren't adding a complete div block to match the other code you had. You left out the <div class="block"> and only added the input and span.

Demo http://jsfiddle.net/34Lbu/
API: .before https://api.jquery.com/before/
Hope rest fits your need :)
code
$('.add').click(function () {
$(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$(document).on('click', '.remove', function () {
$(this).parent('div').remove();
});
EDIT http://jsfiddle.net/amdzakir/gS8u2/38/
To check if all the input fields are filled with values.
$('.add').click(function() {
flag = true;
$('input').css('border-color','green');
$('input').each(function(){
if ($.trim($(this).val())===''){
$(this).css('border-color','red');
flag = false;
}
});
if(flag){
$(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
}
});
$(document).on('click','.remove',function() {
$(this).parent().remove();
});

try this:
$('.remove').click(function() {
$(this).closest('div').remove();
});
$('.add').click(function() {
$('.block:last').after('<input type="text" /><span class="remove">Remove Option</span>');
});

Here is one way -
http://jsfiddle.net/gS8u2/3/
$('.add').click(function () {
$('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); // make sure to add the div too
});
$('body').on('click', '.remove', function () { // use event delegation because you're adding to the DOM
$(this).parent('.block').remove();
});

jquery remove only effect the first span

Refer to my jsfiddle , my jquery only work for the first "X" i click but not the second or third ?
2) how do i disable it when it only left one input ?
Demo
<div class="main-form">
<fieldset id="ingt">
<legend></legend>
<div class="formheader">
<label style="width:170px;"></label>
<label></label>
</div>
<div class="formrow">
<span class="drag"></span>
<input type="text" max-length="30" name="recipe[ingredient][0][amount]" />
<input type="text" id="ingredient" size="60px" name="recipe[ingredient][0][ingredient]" />
<span id="remove">X</span>
</div>
<div class="formrow">
<span class="drag"></span>
<input type="text" max-length="30" name="recipe[ingredient][1][amount]" />
<input type="text" id="ingredient" size="60px" name="recipe[ingredient][1][ingredient]" />
<span id="remove">X</span>
</div>
<div class="formrow">
<span class="drag"></span>
<input type="text" max-length="30" name="recipe[ingredient][2][amount]" />
<input type="text" id="ingredient" size="60px" name="recipe[ingredient][2][ingredient]" />
<span id="remove">X</span>
</div>
<div id="add"></div>
<button id="addi" type="button" onclick="add_field()">Add </button>
</fieldset>
</div>
$(function () {
$("#remove").click(function () {
$(this).parent().remove();
});
});

ID of an element must be unique, use class instead
<span class="remove">X</span>
then
$(function () {
$(".remove").click(function () {
$(this).parent().remove();
});
});
The ID selector will return only the first element with the said element so your selector $("#remove") will return the first element with the the id remove so the click handler will get added to only that element
Also since you have an add button I'm assuming you will be adding dynamic elements, so use event delegation to handle the new elements
$(function () {
//if you want to make the last item in the list(in terms of position) to non removable
$(".main-form").on('click', '.remove:not(:last)', function () {
$(this).parent().remove();
});
});
Demo: Fiddle
or
$(function () {
$(".main-form").on('click', '.remove', function () {
//if you want to make the last item in the list to non removable
if ($('.remove').length > 1) {
$(this).parent().remove();
}
});
});
Demo: Fiddle

Duplicate IDs. ( IDS need to be unique )
<span id="remove">X</span>
change to
<span class="remove">X</span>
and change the script
$(".remove").click(

Id should be unique. So you can use class instead of it.
Change id='remove' to class='remove'
and try,
$(function () {
$(".remove").click(function () {
$(this).parent().remove();
});});
To restrict last one not clickable, Just try,
$(function () {
$(".remove").click(function () {
if($(".remove").length > 1){
$(this).parent().remove();
}
});});

ID must be unique, I will suggest you to use class instead
$(".remove").click(function () {
$(this).parent().remove();
});
HTML
<span id="remove">X</span>
change to
<span class="remove">X</span>
Fiddle DEMO