After start the application, i load content of formularzZgloszeniowy to empty div(#zawartoscTabeli). After click in li element, i load dates from div #ogloszenia to div(#zawartoscTabeli). From this moment, i can't catch event from button #kik.
Has someone any idea how to solve this problem??
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<meta charset="utf-8">
<title>Dokument bez tytułu</title>
<script>
$(document).ready(function() {
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#formularzZgloszeniowy').html()).animate({
opacity: 1
}, 500);
$("section ul").on('click', 'li', function() {
var id = this.id;
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#ogloszenia div:nth-child(' + id + ')').html()).animate({
opacity: 1
}, 500);
});
$('#kik').click(function() {
alert('dddd');
});
});
</script>
</head>
<body>
<div id="wrapper">
<section>
<ul>
<li id="1" style="font-size: 12px;">CLICK</li>
</ul>
<div id="zawartoscTabeli">
</div>
</section>
<!--formularz zgloszeniowy-->
<div id="formularzZgloszeniowy" style="display: none">
<form id="form1" action="rejestracjaUzytkownika.jsp" method="POST">
<div class="formualrz">
<div class="width20">Preferowane miejsce pracy<sup>*</sup>:</div>
<div class="width20">
<input type="text" name="miejsce_pracy" />
</div>
</div>
<div class="formualrz">
<div class="left">Imię i nazwisko<sup>*</sup>:</div>
<div class="right">
<input type="text" name="imie_nazwisko" />
</div>
</div>
<BR/>
<BR/>
</form>
</div>
<!--formularz zgloszeniowy-->
<div id="ogloszenia" style="display: none">
<div>
<p class="bold">Opis stanowiska:</p>
<ul>
<li>123</li>
<li>1234</li>
<li>326236</li>
</ul>
<button id="kik">BACK</button>
</div>
</div>
</div>
</body>
</html>
Link to demo
As you're updating the html of element, the events are unbinded. Use event delegation:
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.
$('#zawartoscTabeli').on('click', '#kik', function () {
alert('Łot de fack');
});
Demo: http://jsfiddle.net/tusharj/95v7fbbe/1/
Docs: http://learn.jquery.com/events/event-delegation/
Related
I have dynamic input type file fields which can be added more by clicking on add more
I have scripted to get file name when it is selected, but it is working for only first field not for other fields.
So how to get all file names when it is selected?
$("#em_add").click( function(){
var decoration_box = $(".one").html();
$(".logos").append('<div class="one">'+decoration_box+'</div>');
});
$('.logo').change(function () {
var filePath=$(this).val();
alert(filePath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">
<div class="one">
<input type="file" name="logo[]" id="logo" class="logo" />
</div>
</div>
you are adding elements dynamically but when you add you are not attaching an event handler to these new elements. To fix this you can use event delegation, by attaching the event to parent .logos.
$("#em_add").click( function(){
var decoration_box = $(".one").html();
$(".logos").append('<div class="one">'+decoration_box+'</div>');
});
$('.logos').on('change', '.logo', function () {
var filePath=$(this).val();
alert(filePath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">
<div class="one">
<input type="file" name="logo[]" id="logo" class="logo" />
</div>
</div>
Refer Jquery .on('change') not firing for dynamically added elements
$("#em_add").click( function(){
var decoration_box = $(".one").html();
$(".logos").append('<div class="one">'+decoration_box+'</div>');
});
$('.logos').on('change', 'input:file', function () {
var filePath=$(this).val();
alert(filePath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">
<div class="one">
<input type="file" name="logo[]" id="logo" class="logo" />
</div>
</div>
I have two two <p> and one <div> and want event handler to display a message when the first <p> is pressed. How can I pull that off?
$("#menu:first-child").on('click', 'p', pullInput);
function pullInput() {
console.log("da");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<p id="newCategoryButton">New category</p>
<p>New Song</p>
</div>
Your selector is wrong. Update your selector like this
$("#menu p:first-child").on('click', pullInput);
function pullInput(){
console.log("HI!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<p id="newCategoryButton">New category</p>
<p>New Song</p>
</div>
Working fiddle https://jsfiddle.net/9amv3vmh/
You need to use :first-child selector with p element.
$("#menu").on('click','p:first-child',pullInput);
$("#menu").on('click', 'p:first-child', pullInput);
function pullInput() {
console.log("da");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<p id="newCategoryButton">New category</p>
<p>New Song</p>
</div>
However as you have sepecified ID with p element use it to bind event handler.
$("#newCategoryButton").on('click', pullInput);
I have the DOM structure as
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
</div>
</div>
<div class="subContent">
</div>
<div class="subContent">
</div>
I want to select <div class="subContent"> on enter event of input box which is closest to the input box.
$('#search').on('keypress', function(){
$(this).parent().parent().next();
});
Is there a better way to do this ?
$(this).closest('#wrapper').nextAll('.subContent').first()
That way you can change it to use classes
I guess this can help you
$("#search").click(function () {
$(this).closest("div.module").hide();
});
Possible duplicate of
Hiding the closest div with the specified class
Use This:-
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
<div class="subContent" style = 'background-color:red;'>div1</div>
<div class="subContent" style = 'background-color:red;'>div2</div>
<div class="subContent" style = 'background-color:red;'>div3</div>
</div>
</div>
</html>
<script>
$('#search').on('keypress', function(){
$(this).next().css( "background-color", "blue" );
});
</script>
For some reason, i have this two functions in my javascript, and both seems to work.
The first one, is when user click on one of two divs, it will show the other div, depending on wich was clicked.
The second one, is when the user is on the second div, and clicks on back.
All this is working, but when the user return to the first div, and i click on one of two divs, this isnt going to the second div.
It's closing both divs.
First Div with two options:
<div class="firstQuestion">
<div class="male" onclick="secondQuestion(this);"></div>
<div class="female" onclick="secondQuestion(this);"></div>
</div>
Second div, with back button:
<div class="secondQuestion">
<form class="formAconselhamento" id="male">
<input type="button" id="save_value_male" class="back" name="save_value" onclick="comeBack(this); return false;"/>
<input type="button" id="save_value_male" class="next" name="save_value" />
</form>
</div>
Javascript functions:
function secondQuestion(divID)
{
var clicado = $("#"+$(divID).attr('class'));
$(".firstQuestion").hide();
$("#"+$(divID).attr('class')).show();
}
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(".secondQuestion").hide();
$(".firstQuestion").show();
}
}
How can i resolve my issue?
In comeBack function you hide <div class="secondQuestion"> instead of <form class="formAconselhamento" id="male">
Try something like:
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(divID).closest("form").hide();
$(".firstQuestion").show();
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.maincat{background: #eef;}.subcat{background: #abc;}
</style>
</head>
<body>
<div class="maincat">
<div class="type" rel='one'>first</div>
<div class="type" rel='two'>second</div>
<div class="type" rel='three'>third</div>
</div>
<div class="subcat" style="display: none">
back
<div id="one">
first content
</div>
<div id="two">
second content
</div>
<div id="three">
third content
</div>
</div>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".type").click(function(){
$(".maincat").hide();
$("#" + $(this).attr('rel')).show().siblings().hide();
$('.subcat').show();$('.back').show();
});
$(".back").click(function(){
$('.subcat').children().hide();$(".maincat").show();
});
</script>
</body>
</html>
Using C#, PowerShell and Jsoup I've tried to capturing the percentage that is displayed at the end, 99.96%. Using the DOM explorer in IE, this is what I see:
<!DOCTYPE html>
<html>
<body id="website#22;page">
<div id="wrap">
<script type="text/javascript">...</script>
<div class="topRow" id="iTopRow">...</div>
<div id="header">...</div>
<div id="content">
<div class="paddingfix">
<script type="text.javascript">...</script>
<div class="toppaddingfix"></div>
<div title="Summary Percentage"
class="overallPercentage">
<div>
<div style="padding-bottom: 12px;">
<div class="textRegionContainer" id="iTextRegion_D14">
<div class="position" style="display: none;"<>/div>
<div class="status" style="display: none;">loaded</div>
<div class="textRegionPlaceHolder">
<p class="textRegionTitle">
99.96 %
</p>
</div>
</div>
</div>
However, when programmatically trying to capture it I receive this:
<div id="iTextRegion_DR14" class="textRegionContainer">
<script type="text/javascript">
$(document).ready(function() {
var client = new wLive.Service.Client(false);
var textRegion = new wLive.Controls.TextRegion(
'Tools',
'AppServerOutDetails3',
'DR14',
'#iTextRegion_DR14',
{"id":"DR14","data":null,"paragraphs":["<bindingref
name=\"Reliability\" \/> %\u000d\u000a "],"style":0},
client);
wLive.Controls.DataBridge.registerDataRegion('#iDataBridge', textRegion);
});
</script>
</div>
How do I programmatically capture that percentage so I can then have another program evaluate it's value?