jQuery似乎无法在函数内部工作

时间:2014-11-17 03:28:35

标签: javascript jquery html

我尝试做的是按钮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);

});

1 个答案:

答案 0 :(得分:3)

应该是

$(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);