我编写了一些jquery& AJAX调用我所做的PHP函数,获取一些API数据并带来它而不刷新页面。它会附加,因此您可以进行多次搜索而不会丢失结果。
我现在需要做的是,我想让用户能够改变他对任何一个结果的看法。也许每排末尾有一点“X”。他们点击“X”,那个特定的结果就消失了。
我用谷歌搜索了这个,但我不知道我在找什么。请告诉我正确的方向吗?
这就是我所拥有的,所以你知道我在寻找什么:
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="ajax.php" id="searchForm">
<input type="text" name="isbn" placeholder="Search..." />
<input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>
<form name="buyback" method="post" action="isbn.php">
<table id="result" class="myaccount" border=0 cellspacing=5 cellpadding=4>
<tr><td>
<strong>ISBN:</strong>
</td><td>
<strong>Price:</strong>
</td>{if $userlevel == 5}<td>
<strong>Full FCB Price</strong>
</td>{/if}
</tr>
</table>
<input name="doBuy" type="submit" value="Buy"><br>
</form>
<script>
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get some values from elements on the page:
var $form = $( this ),
term = $form.find( 'input[name="isbn"]' ).val(),
//term = "isbn",
url = $form.attr( 'action' );
$.post( url, { doSearch: "Search", isbn: term } ,
function( data ) {
var content = $( data );
$( "#result" ).append( content );
}
);
});
</script>
修改 是的,它只是以这种格式返回数据:
<tr><td>
{$isbn}
<INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
{$userPrice}
<INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">
</td></tr>
答案 0 :(得分:1)
这实际上取决于ajax调用返回的html类型。但你可以连接一个.live()事件,删除你需要删除的东西。
$('.removeItem').live('click', function(e) {
// remove whatever you want. maybe the previous element?
$(this).closest('tr').remove();
});
// clicking that link will remove everything returned by the ajax.php call
var content = $(data);
content.append("<a class='removeItem'>X</a>");
$("#result").append(content);
或者您可以将锚点添加到由ajax.php文件生成的结果中。
编辑:
您可以使用直播活动并修改您的html:
<tr><td>
{$isbn}
<INPUT TYPE=hidden NAME="buy_isbn" VALUE="{$isbn}">
</td><td>
{$userPrice}
<INPUT TYPE=hidden NAME="buy_price" VALUE="{$userPrice}">
</td><td>
<a href="#" class="removeItem">X</a>
</td></tr>