jquery - jQuery 切换名称属性和使用 ne 属性

Question

我尝试切换按钮上的名称属性，然后使用由新名称调用的函数将其切换回来。这是我的代码：

HTML

<button name="post">Post</button>

jQuery

$('button[name=post]').click(function(){

    $(this).attr('name','get');
    $(this).text('get');

});
$('button[name=get]').click(function(){

    $(this).attr('name','post');
    $(this).text('post');

});

最后但并非最不重要的一个JS FIDDLE

出于某种原因，当新名称属性启动时，第二个函数不会触发，一些指针？

Answer 1

你也可以试试这个，对我来说似乎更简单

HTML

<button id="clickme" name="post">Post</button>

JAVASCRIPT

$('#clickme').click(function(){ 
    if($(this).attr("name") == "post") {
        $(this).attr("name", "get");
        $(this).text("get");
    } else {
        $(this).attr("name","post");
        $(this).text("post");
    }

});

在这里提琴

Answer 2

您必须使用事件委托，因为您更改了按钮的名称（DEMO）。

添加父级或使用现有父级：

<div id="parent">
    <button name="post">Post</button>
</div>

并以这种方式绑定您的事件：

$('#parent').on('click', 'button[name=post]', function(){

    $(this).attr('name','get');
    $(this).text('get');

});

$('#parent').on('click', 'button[name=get]', function(){

    $(this).attr('name','post');
    $(this).text('post');

});

Answer 3

因为您在元素上绑定事件后修改用作选择器的属性，所以新选择器无效。简单的方法应该将事件委托给您的元素嵌套的任何静态容器：

http://jsfiddle.net/DRUQt/6/

$(document).on('click','button[name=post]',function(){

    $(this).attr('name','get');
    $(this).text('get');

});
$(document).on('click','button[name=get]',function(){

    $(this).attr('name','post');
    $(this).text('Post');

});