jQuery通过attr更改ID,然后调用它
jQuery changing ID via attr and then calling it
我正在用PHP为我的URL shortener网站创建一个UserCP,但我已经停止了,因为我现在遇到了一个无法解决的小问题。
我想让用户通过使用Javascript的库Jquery轻松地更新URL。到目前为止,如果你点击"编辑"按钮(见下文),文本就会变成文本字段,所以它是可编辑的!这太棒了。在将其制作成文本字段的过程中,我使用了attr()函数来更改将文本制作成文本域的按钮的类名和ID。使用我分配的新ID将向PHP脚本发送$.POST。我希望你能理解,我会把下面的代码展示给你看!
<?php while($list = $listURLs->fetch_array()) { ?>
<td id="longURL<?= $list['ID']; ?>"><a rel="tooltip" title="<?= $list['longURL']; ?>" target="_blank" href="<?= $list['longURL']; ?>"><?= substr($list['longURL'],0,25); ?></a></td>
<td id="shortURL<?= $list['ID']; ?>"><input type='text' class='span2' onmouseover="(this.select())" value='http://smurl.es/<?= $list['shortURL']; ?>'/></td>
<td><?= $list['type']; ?></td>
<td><?= $time; ?></td>
<td><?= $list['hits']; ?></td>
<td><button id="edit<?= $list['ID']; ?>" class='btn btn-warning btn-small' rel='tooltip' title='Edit'><i class="icon icon-edit"></i></button> <button id="del<?= $list['ID']; ?>" class='btn btn-danger btn-small' rel='tooltip' title='Delete'><i class="icon icon-trash"></i></button></td>
</tr>
<script type="text/javascript">
$("button#edit<?= $list['ID']; ?>").click(function() {
$('#longURL<?= $list['ID']; ?>').html("<input type='text' value='<?= $list['longURL']; ?>' />");
$('#shortURL<?= $list['ID']; ?>').html("<div class='input-prepend'><span class='add-on'>http://smurl.es/</span><input id='prependedInput' type='text' value='<?= $list['shortURL']; ?>' class='span1' /></div>");
$("button#edit<?= $list['ID']; ?>").attr({"class": "btn btn-info btn-small test", "data-original-title": "Click to Save", "id": "save<?= $list['ID']; ?>"});
});
$('button#save<?= $list['ID']; ?>').click(function() {
alert("testing - DEBUG"); // Save code here
});
</script>
<?php
}
}
?>
所以,如果你仍然有点困惑,我只想知道我如何调用我通过attr或其他函数创建的ID?
我已经检查了我的控制台,没有发现任何错误。
您必须使用event.preventDefault
:来防止默认的onclick
行为
$("button#edit<?= $list['ID']; ?>").click(function(e) {
e.preventDefault();
$('#longURL<?= $list['ID']; ?>').html("<input type='text' value='<?= $list['longURL']; ?>' />");
$('#shortURL<?= $list['ID']; ?>').html("<div class='input-prepend'><span class='add-on'>http://smurl.es/</span><input id='prependedInput' type='text' value='<?= $list['shortURL']; ?>' class='span1' /></div>");
$("button#edit<?= $list['ID']; ?>").attr({"class": "btn btn-info btn-small test", "data-original-title": "Click to Save", "id": "save<?= $list['ID']; ?>"});
});
相关文章:
- 如何在JQuery函数中定义一个值,然后调用另一个函数并使用该值
- 文件上传:检查文件格式,然后调用srvlet
- 如何使用javascript验证表单中的数据,然后调用php页面
- 加载文件,然后调用回调函数
- 当调用.of()然后调用.on()时,Jquery是否可能将事件推迟
- 如何将javascript文件插入到iframe中,然后调用插入的javascript中的函数
- 在函数中传递参数,然后调用onClick函数
- 异步加载ASP.NET绑定的Javascript,然后调用回调
- 一键点击首先调用javascript,执行验证,然后调用控制器方法
- 如何检查文本字段为空,然后调用javascript
- 如何在ActionLink中调用删除前的确认消息,然后调用控制器进行删除
- Jquery OOP 模型阻止默认然后调用基处理程序
- 在另一个函数中使用变量,然后调用新函数
- 加载异步 JS 然后调用函数
- 调用原型的重写方法,然后调用下一个原型的重写方法错误
- TinyMCE只初始化一次,然后调用它退出
- 在同一个元素上调用c#然后调用js
- 动态地将href附加到锚点标记,然后调用click事件
- 然后调用 JavaScript 匿名函数
- 如何不增加setInterval然后调用多次