问题描述:

http://jsfiddle.net/leonwho/65bsS/25/

I have 2 buttons, clicking either should fade them both out(their container), and then appends the deleteXhtml variable to the .delete_x_here hidden div and fade in the delete button.

This seems like it should be straight forward, perhaps my DOM traversing is messed up?

I notice this in the Chrome console:

HTML

<table>

<tr>

<td class="incoming-actions">

<div class="delete_x_here"></div>

<div class="button_td">

<div id="choice-accept-request" class="request-btn quick-accept"></div>

<div id="choice-deny-request" class="request-btn quick-deny"></div>

</div>

</td>

</tr>

jQuery

$('.request-btn').unbind('click').bind('click', function() {

var $tr = $(this).closest("tr");

var btnArea = $(this).closest('.incoming-actions');

var btnAccept = $(this).closest('.incoming-actions #choice-accept-request');

var btnDeny = $(this).closest('.incoming-actions #choice-deny-request');

var deleteBox = $(this).closest(".incoming-actions .delete_x_here");

var deleteXhtml = $('<div id="btn-delete-request" class="delete-x" title="Delete">X</div>');

var btnBox = $(this).closest('.button_td');

var user_choice = $(this).attr('id');

if (user_choice === 'choice-accept-request') {

console.log('choice-accept-request');

// Disable Buttons here while waiting on Request

$(btnAccept).css('cursor','auto');

$(btnAccept).attr("disabled", "disabled");

$(btnDeny).css('cursor','auto');

$(btnDeny).attr("disabled", "disabled");

//change buttons here

$(btnBox).fadeOut('fast', function() {

$(deleteXhtml).appendTo(deleteBox);

$(deleteBox).fadeIn('fast');

console.log('fade in delete button with appended deleteXhtml here');

});

}

});

网友答案:

The problem is that deleteBox is not defined.

Use this to define it correctly:

var deleteBox = $(this).parents(".incoming-actions").find(".delete_x_here");

JSFiddle

网友答案:

In order for it to fadeIn it needs to be hidden first. So this could work.

$(deleteXhtml).appendTo(deleteBox).hide().fadeIn(1200);
相关阅读:
Top