This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
<input type="text" id="message" param="1" placeholder="chat here.." />
This is element inside the div which is working fine outside the javascript
here is the case after appended element
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
Now when I do
$('#message').keypress(function(event){
alert('WORKING');
});
alert('working') only works when I type any key in the first element after the append is made on some click and if I type something inside that appended input box I get nothing but why?
Look at using .on() or .live() depending on your jQuery version to bind to elements that are appended.
$("div").on( "keypress", "#message", function(){
alert( "working!" );
});
where div is the selector of a parent of #message.
here work fine;
https://jsfiddle.net/mig1098/0rgd3ppu/
var id='one',img_url='http';//test values
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
$('#message').keypress(function(event){
alert(event.keyCode);
});
Related
I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.
There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.
Disable first form and open another form to insert data.. all this i have to do in same page how to do that ?
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the another section of same page
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the code.....when i successfully insert data after clicking submit button in first form ..i want the first form to be disable and 2 form should be enabled for inserting data !
Here is a simple way to do so using jquery :
First set the second form to be display:none by default then detect the function submit of the first form then show the second and hide the first using jQuery Effects - Fading :
With jQuery you can fade elements in and out of visibility.
jQuery fadeIn()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeTo()
$(function(){
$('#first button').on('click',function(){
/* your code */
$('#first').css('pointer-events','none');
$('#second').fadeIn();
});
$('#second button').on('click',function(){
/* your code */
$('#second').css('pointer-events','none');
$('#first').fadeIn();
})
})
section {
Width:100%;
height:200px;
}
#first {
background-color:blue;
}
#second{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section id="first">
<div>
<button>Submit</button>
</div>
</section>
<section id="second" style="display:none">
<div>
<button>Submit</button>
</div>
</section>
I have a list of employees generated dynamically from database, and each employee has got an id, now I want to open a div box on each click with respect to the id's and display their id's in that box.
I am not able to access that div with respect to the id selected.
include 'connect.php';
$ert=mysql_query("Select * from login_session where bit='0' and date='$date'") or die(mysql_error());
while($we=mysql_fetch_array($ert)){
$employee_id=$we['employee_id'];
?>
<li> <?php echo $we['name'];?></li>
<div class="popup-box chat-popup" id="employee_<?php echo $employee_id; ?>">
<div class="popup-head">
<div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan
</div>
<div class="popup-head-right pull-right">
<div class="btn-group">
<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i> </button>
<ul role="menu" class="dropdown-menu pull-right">
<li>Media</li>
<li>Block</li>
<li>Clear Chat</li>
<li>Email Chat</li>
</ul>
</div>
<button data-widget="remove" class="removeClass chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
</div>
</div>
<div class="popup-messages">
<div class="direct-chat-messages">
<div class="chat-box-single-line">
<abbr class="timestamp">October 8th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-img-reply-small pull-left">
</span>
<span class="direct-chat-reply-name">Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<div class="chat-box-single-line">
<abbr class="timestamp">October 9th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img big-round">
<span class="direct-chat-reply-name">Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
</div>
</div>
<div class="popup-messages-footer">
<textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
<div class="btn-footer">
<button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
<button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
</div>
</div>
</div>
<script>
$(function(){
$(".addClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).addClass('popup-box-on');
});
$(".removeClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).removeClass('popup-box-on');
});
})
</script>
Firstly , inside the anchor tag <a> with class .addClass , you are using $we['employee_id'] and then for it's respective box you are using $employee_id which is null and it results to an undefined variable error.
You should give the trigger and target selectors a unqiue identifiers , such as for .addClass you can use data attributes for appending the data to target something. look below:
<?php echo $we['name'];?>
and then for respective box id you can assign a unique id to it something like:
<div class="popup-box chat-popup" id="employee_<?php echo $employee_id; ?>">
and at the end inside javascript / jquery , you can trigger them with the data attribute value and by placing the unique identifier we have created for target div. let say .addClass's data attribute contains 34, which is a employee id , and .popup-box will have id="employee_34" as we need to identify them with something unique and not only numbers.
$(function(){
$(".addClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).addClass('popup-box-on');
});
});
at the end you php and html code should look like this:
include 'connect.php';
$ert=mysql_query("Select * from login_session where bit='0' and date='$date'") or die(mysql_error());
while($we=mysql_fetch_array($ert)){
?>
<li> <?php echo $we['name'];?></li>
<div class="popup-box chat-popup" id="employee_<?php echo $employee_id; ?>">
<div class="popup-head">
<div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan
</div>
<div class="popup-head-right pull-right">
<div class="btn-group">
<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i> </button>
<ul role="menu" class="dropdown-menu pull-right">
<li>Media</li>
<li>Block</li>
<li>Clear Chat</li>
<li>Email Chat</li>
</ul>
</div>
<button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button>
</div>
</div>
<div class="popup-messages">
<div class="direct-chat-messages">
<div class="chat-box-single-line">
<abbr class="timestamp">October 8th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-img-reply-small pull-left">
</span>
<span class="direct-chat-reply-name">Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
<div class="chat-box-single-line">
<abbr class="timestamp">October 9th, 2015</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Osahan</span>
</div>
<!-- /.direct-chat-info -->
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey bro, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img big-round">
<span class="direct-chat-reply-name">Singh</span>
</div>
<!-- /.direct-chat-text -->
</div>
</div>
</div>
<div class="popup-messages-footer">
<textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
<div class="btn-footer">
<button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
<button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
</div>
</div>
</div>
<?php } ?>
and your javascript code like below:
$(function(){
$(".addClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).addClass('popup-box-on');
});
});
and do in this way same for removing the respective box for employee div.
Note
As the popup-box div's are multiple and are already inside the dom , you should not use id selector for remove trigger , as it will target only first div and not others , use an class for removing the div as well such as removeBox
Update for remove
For removing the div, don't use id for removing the div , change your remove button to the following:
<button data-widget="remove" data-employee="<?php echo $we['employee_id']; ?>" class="chat-header-button removeClass pull-right" type="button"><i class="glyphicon glyphicon-off "></i></button>
and use the below jquery code for removing the div
$(function(){
$(".removeClass").click(function () {
var var1=$(this).data('employee');
$('#employee_'+var1).removeClass('popup-box-on');
});
});
I Try to getting the text form same div on button click event.
Here is my HTML Markup:
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airlogowidth airsprite airlogo A4">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more-1" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary" style="display: none;">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i><abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
I want "flight-no" div html i.e SG-264 on 'btn-book' on Click.
I try as follows, but return 'undefine' -
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-info').parent('div.left-i').html();
alert(flightNo);
});
Note that in the page have many rows with 'flights' class.
Anyone help me?
The issue with your current code is that the .flight-info element is not a direct parent of .btn-book, it's a sibling of one of the parents. This is why the .flight-info selector on closest() returns nothing.
The easiest way to achieve what you require is to use closest() to get the nearest common parent of both elements, in this case .flight-box, then use find() and text() to get the flight number. Try this:
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('div.flight-box').find('.flight-no').text();
alert(flightNo); // = SG-264 given your example
});
Example fiddle
you need to use .find() with .closest() and div.left-i is children of div.flight-info not parent()
use it like this
$('.btn-book').on('click', function(){
var flightNo = $(this).closest('.flight-box').find('div.left-i .flight-no').html();
alert(flightNo);
});
DEMO
I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.
live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")
I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/