OnClick событие на исчезающий элемент

Question

Вот jsfiddle: http://jsfiddle.net/nGpmP/

При нажатии на этот вход, появляется кнопка справа. Эта кнопка имеет событие onclick();. Проблема в том, что это событие не срабатывает, поскольку, когда вы нажимаете на кнопку, оно исчезает (и вход теряется), а javascript не запускается. Как я могу это сделать, чтобы этот javascript был выполнен?

Answer 1

.buttonInput input:not(:focus) ~ .buttonIcon { 
    display: none; 
} 

становится

.buttonInput .buttonIcon { 
    display: none; 
} 

и

.buttonInput input:active ~ .buttonIcon { 
    display: inline-block; 
} 

становится

.buttonInput .buttonIcon:active { 
    display: inline-block; 
} 

Таким образом, кнопка не исчезает, пока вы ее не щелкнете.

http://jsfiddle.net/7uFVS/1/

Answer 2

Не используйте селектор фокусировки CSS, чтобы скрыть/показать кнопку, а скорее скрыть кнопку с помощью JavaScript onBlur. Используя объект события, который указан в качестве первого аргумента методу onBlur, вы можете проверить, является ли атрибут «target» кнопкой - если да, очистите узел. В качестве альтернативы вы можете использовать setTimout() с низким значением, например, 50, прежде чем скрывать кнопку, тем самым позволяя щелчку стрелять до того, как кнопка будет скрыта.

Answer 3

Используйте событие mousedown на кнопке «button», так как щелчок запускается слишком поздно.

$(document).on('mousedown', '.buttonIcon', function() { 
    $(this).prev('input').val(''); 
}); 

jsFiddle example

Answer 4

Я сделал несколько изменений в jsfeedle. Добавлены некоторые функции идентификаторов и 2 JQuery

<div class="buttonInput"> 
    <input id="inputbox" type="text" placeholder="Status..."/> 
    <div id="clearBtn" class="buttonIcon" onclick="ClearInput(this);">BTN</div> 
</div> 
<script> 
    $('#inputbox').click(function(){ 
     $('.buttonIcon').css('display','block'); 
    }); 

    $('#clearBtn').click(function(){ 
     $('#inputbox').val(' '); 
    }); 
</script> 

http://jsfiddle.net/Qpd6V/