我似乎遇到了jQuery点击功能的问题,我有以下代码:
j$(document).ready(function(e) {
setInterval(function(){
j$.ajax({
url: "/include/new_customer.php",
cache: false
})
.done(function( html ) {
j$( "section .col-xs-12" ).append( html );
});
},80000);
j$('a.dropDown').click(function(e){
e.preventDefault();
j$(this).closest('.row').next().toggleClass('hidden');
});
});
使用以下HTML(抓住必要的内容):
<div class="col-xs-12>
<div class="row">
<a href="#" class="dropDown">Manage</a>
</div>
<div class="row hidden">
<!-- stuff -->
</div>
</div>
您可以看到,如果单击a标记,则隐藏类的行将切换.我有另外两行的AJAX,所以它会像这样:
<div class="col-xs-12>
<div class="row">
<a href="#" class="dropDown">Manage</a>
</div>
<div class="row hidden">
<!-- stuff -->
</div>
<div class="row">
<a href="#" class="dropDown">Manage</a>
</div>
<div class="row hidden">
<!-- stuff -->
</div>
</div>
我的问题是,对于新数据,当我点击标签时,切换功能不起作用.我已经完成了一些测试,例如从inspect元素中删除隐藏的类,并且有数据要显示.我不知道发生了什么事.请帮忙!
我想用jquery创建基本的删除和删除.但我有一个jquery追加问题,为什么我单击追加时无法在新的<li>上激活addClass.
当我点击<li>时,它将在<li>上添加活动类,然后我想删除<li>让类激活
任何人都可以帮助我为什么会这样
$(document).ready(function(){
var list=$('ul.appendWrap > li').length;
$('.btn_append').click(function(){
$('ul.appendWrap').append('<li>new</li>');
});
$('.btn_remove').click(function(){
$('li.active').remove();
});
$("ul.appendWrap li").click(function(){
$(this).addClass('active');
})
});li, a {
cursor: pointer;
}
.active {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="appendWrap">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a class="btn_append">append</a>
<a class="btn_remove">remove</a>我有一个PHP管理仪表板,其中使用了bootstrap主题.我们知道它有内置的jQuery对象,如下拉菜单,折叠,制表符等等.如果我们刚刚添加了bootstrap js文件,它们都可以工作.
现在问题是当我从ajax调用获取内容并将其显示在我的页面上时,通过ajax加载的所有javascript控件都无法正常工作.
我使用这个ajax调用显示所有内页.所以它可能对加载的HTML有任何bootstrap javascript控件.
那么如何在每个ajax调用上动态修复此问题.我的ajax加载javascript在下面
$('a').bind('click',function(event){
event.preventDefault();
$.get(this.href,{},function(response){
$('#app-content-body').html(response)
});
});
注意:我的问题不在上面的代码中.当我从上面的代码加载html内容时,实际问题是bootstrap javascript控件无法正常工作
所以我对javascript/jquery很新,所以我需要一些帮助.这是问题所在.我有一个页面,其中一个按钮触发一个jquery动画来显示一个登录表单.(它只是取代之前的html)在登录表单上,我动态创建一个按钮来隐藏登录表单,以及揭示原始的HTML.但是.click方法无法调用该按钮,甚至OnClick属性也无效!任何建议？
$(document).ready(function() {
$("#login_button").click(function() {
$("#menu").animate({height: "toggle"}, 500, function() {
$("#menu").empty();
$("#menu").append('<button id="back_button"></button>');
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false});
});
});
});
然后是侦听"back_button"点击的代码:
$(document).ready(function() {
$("#back_button").click(function() {
$("#menu").animate({height: "toggle"}, 500, function() {
$("#menu").append(//Regular HTML);
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false});
});
});
});
可以在我的另一个javascript生成的元素上执行javascript吗？任何想法都会很棒!提前致谢!
我正在为我的应用中的个人资料开发+关注功能.跟随功能只工作一次(在新页面加载时),但在脚本替换DOM元素后,它不起作用.
用户未遵循配置文件时的HTML输出:
<div id="follow">
<a>Follow profile</a>
</div>
HTML输出当用户当前跟随配置文件时:
<div id="unfollow">
<a>Unfollow profile</a>
</div>
魔术发生在jQuery中.以下函数包含在$(document).ready()函数中:
function follow() {
$("#follow a").on("click", function() {
// $.getJSON fn here that follows profile and returns success T/F
if ( success ) {
$("#follow").remove();
$("#follow-container").html('<div id="unfollow"><a>Unfollow profile</a></div>');
}
});
$("#unfollow a").on("click", function() {
// $.getJSON fn here that unfollows profile and returns success T/F
if ( success ) {
$("#unfollow").remove();
$("#follow-container").html('<div id="follow"><a>Follow profile</a></div>');
}
});
}
假设用户单击"关注配置文件".该脚本删除#follow a链接并用链接替换它#unfollow a …
我使用Bootstrap和jQuery创建了一个待办事项列表.通过单击每个列表项右侧的"X"徽章,可以从列表中删除项目.这适用于首次加载时页面上的项目,但您无法删除用户添加的项目.
也许需要刷新某些东西以提醒脚本应该监视click事件的新元素？
todo.js:
$(document).ready(function() {
//add item if the button is clicked
$('#addButton').click(function(){
$('<li class="list-group-item"><span class="badge">X</span>' + $('#input').val() + '</li>').appendTo('#list');
$('#input').val(null);
});
//add item if the enter key is pressed
$('#input').bind("enterKey",function(e){
$('<li class="list-group-item"><span class="badge">X</span>' + $('#input').val() + '</li>').appendTo('#list');
$('#input').val(null);
});
$('#input').keyup(function(e){
if(e.keyCode == 13) {
$(this).trigger("enterKey");
}
});
//remove an item by clicking the badge
$('.badge').click(function() {
$(this).parent().remove();
});
});
index.html的:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To Do List</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="todo.js"></script> …我BootStarp3用作骨架.我正在动态创建多个元素(在按钮单击时),可以选择使用另一个按钮删除每个创建的元素.问题是我只能删除第一个元素,其他创建的动态按钮似乎没有反应,无法弄清楚出了什么问题.
JSfiddle代码在这里.
HTML:
<div id="reward-container">
<div class="center-block col-lg-10 col-md-10 col-sm-12 text-left" id="">
<div class="center-block col-centered bg-white review text-left">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="form-group form-group-default">
<label>label</label>
<input type="text" class="form-control" placeholder="e.g">
</div>
</div>
</div>
</div>
<button class="btn btn-sm pull-right remove"><b>Remove</b></button>
</div>
</div>
<button class="btn btn-lg btn-info m-t-70 marg" id="add">add more</button>
JS:
$("#add").click(function(){
var count = $("#reward-container").children();
existingRewards = $("#reward-container").children();
var newGift = $('<div class="center-block col-lg-10 col-md-10 col-sm-12 text-left marg" id='+count+'> \
<div class="center-block col-centered …我一直在努力找到解决这个问题的方法,并且在网上遇到了很多类似的帖子,但是没有一个解决方案适用于我的特定实例.
我在一组元素中使用jQuery'inserAfter'.我可以轻松地添加组,但是,我还有一个remove()函数,当单击删除链接时调用,但是新添加的元素没有任何反应,即使我可以删除其他组没有问题.
我正在使用jQuery的on()来实现click函数..但是,这仍然不适用于动态添加的元素.
要重现此问题,请转到下面的jsfiddle链接,单击"添加组"按钮,然后看到添加到DOM的黄色组.现在,将鼠标悬停在黄色组上以显示删除按钮.点击删除按钮,tada ... nothin'
这是一个例子:
http://jsfiddle.net/revive/5MFRm/
jQuery(function($) {
$( "#tabs" ).tabs();
$("#group0").hide();
$('.group-content').hide(); // Hide all group-content elements
function clonePanel() {
var panel=$("#tabs #group0").clone(false),
lastpanel = $("#tabs .group").last().index(),
newid = 'group'+(lastpanel+1);
panel.attr('id',newid).addClass('newpanel');
panel.insertAfter($("#tabs .group").last()).show();
}
$(".add-group").on('click',function(){
clonePanel();
});
$(".delete-group").on('click',function(){
$(this).closest('.group').fadeOut('slow', function(){$(this).closest('.group').remove(); });
// alert('done');
});
$('#tabs').on('click', '.group-title-toggle',function(){ // Add class "hover" on dt when hover
$(this).closest('.group-title').toggleClass('active').next().slideToggle(); // Toggle dd when the respective dt is clicked
});
});
以下是我的代码,用于动态获取提要,然后通过在ID为"feeds"的部门内附加内容将其添加到页面上:
$.ajax({
url: 'http://api.feedzilla.com/v1/categories/'+newsId+'/articles.json',
type: 'GET',
dataType: 'json',
// to execute when successfully got json response
success: function(response){
$.each(response.articles, function(){
var feed= "<div class='media well'>"+
"<div class='media-body'>"+
"<h4 class='media-heading'>"+this.title+"</h4>"+
"<h6>"+this.publish_date+"</h6>"+
"<p>"+this.summary+"</p>"+
"<a href='"+this.url+"' target='_blank'>Continue Reading</a>"+
"</div><br><br>"+
"<button class='showinfo btn pull-right' id='info'>Show Info</button>"+
"</div>";
$('#feeds').append(feed);
});
},
// to execute when error
error: function(jqXHR, textStatus, errorThrown){
alert("Server error!");
},
// execute at last whether success or error
complete: function(){
}
});
正如您所看到的,我正在添加一个类'showinfo'以及id'info'来动态添加按钮.
现在以下是我的事件处理程序:
// SHOW INFO BUTTON CLICK HANDLER
$('.showinfo').click(function(){ …这是我的代码.当我单击添加行时,它将添加下面的行.但点击事件仅在第一行中有效.
它没有在其余的行中工作.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets.com/css/datepicker.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://web-86d95219-b398-4432-85a8-fae716ac3a54.runnablecodesnippets.com/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Name
</th>
<th class="text-center">
Mail
</th>
<th class="text-center">
Mobile
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input id = "date0" type="text" name='name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<select name="category" class="input category"><option …我有一些代码允许用户在页面上创建包含一些内容的div.这些div是动态生成的,我需要一个click事件,当用户点击任何一个动态生成的div时触发.
所有动态创建的div都有class="entry".
<div class="entry">
//some content
</div>
<div class="entry">
//some other content
</div>
//...
$('body').on('click','div.event',function(){
console.log("clicked");
//do stuff
});
但是,此事件似乎没有触发,因为console.log("clicked")永远不会执行.我做错了什么,如何解决这个问题？
编辑:对不起家伙这只是错字.我不敢相信我之前没有发现过.很遗憾浪费你的时间,不幸的是我现在无法删除这个问题,因为人们已经回答了这个问题.
在我的代码中，我有一个 h1 容器，里面有 h1 元素，如下所示：
<div id="container_h1"><h1 id="h1">Title H1</h1></div>
然后，我将一个事件侦听器附加到 h1 元素，以便在用户单击 h1 元素时提醒 h1 文本：
var h1 = document.getElementById("h1");
h1.addEventListener(
"click",
function()
{
alert(h1.innerHTML);
},
false
);
然后，我有 2 个用于删除和插入 h1 元素的按钮，如下所示：
<input type="button" value="remove H1" onclick="remove_h1();">
<input type="button" value="insert H1" onclick="insert_h1();">
//container_h1 element :
var container_h1 = document.getElementById("container_h1");
//Remove h1 :
function remove_h1()
{
container_h1.innerHTML = "";
}
//Re-appear h1 :
function insert_h1()
{
container_h1.innerHTML = '<h1 id="h1">Title H1</h1>';
}
问题 ：
当我通过单击“删除 H1”按钮使 h1 元素消失，然后通过单击“插入 H1”按钮使 …
jquery ×11
javascript ×10
html ×6
ajax ×2
append ×1
button ×1
css ×1
dom ×1
insertafter ×1
php ×1