javascript - jQuery 似乎无法在函数内工作

Question

我尝试做的是一个按钮onclick事件。当您单击按钮时，另一个 div 会向下滑动。当它向下滑动时，它还会向按钮添加一个 onclick 事件，当您在里面使用 alert() 、 console.log() 时它的功能运行得很好。但是当我使用 $('#formHelper').html('New content'); 时什么也没有发生。

首先，我做了一个jsfiddle在这里。

没有错误或任何东西，代码如下:

<div class="panel panel-default">
    <div class="panel-heading">
    <span class="label label-primary">BOOTSTRAP</span> <b>Form-Helpers </b>
        <div class="pull-right"> 
             <button class="btn btn-primary btn-xs" id="formHelper">Show</button> 
        </div>
    </div>
<div class="panel-body" id="formHelperShow">
    Some text
</div>

function myFn(  ) {
    $('#formHelper').html('New content');
    console.log( 'works?' );
};

$(document).on('click', '.btn', function(e)
{

    e.preventDefault();
    var div = '#'+$(this).attr('id');

    $(div)
    .html('Hide')
    .removeClass('btn-primary')
    .addClass('btn-danger')
    .attr('onclick', 'myFn()');

    $(div+'Show').slideDown(500);

});

Answer 1

应该是

$(document).on('click', '.btn', function(e)
{

    e.preventDefault();
    var div = '#'+$(this).attr('id');

    $(div)
    .html('Hide')
    .removeClass('btn-primary')
    .addClass('btn-danger')
    .attr('onclick', myFn);  // Here is the change

    $(div+'Show').slideDown(500);

});

编辑:

function myFn() {
    $('#formHelper').html('New content')
    .unbind('click').click(frstClck);
    $('#formHelperShow').slideUp(500);
};
var frstClck = function (e) {

    e.preventDefault();


    $(this)
        .html('Hide')
        .removeClass('btn-primary')
        .addClass('btn-danger')
        .unbind('click')
        .click(myFn);

    $("#"+this.id + 'Show').slideDown(500);

}


$('.btn').click(frstClck);