javascript - 要素が消えるときの OnClick イベント

Question

ここに jsfiddle があります: http://jsfiddle.net/nGpmP/

When you click on that input, the button on the right appears. This button has onclick(); event. The problem is, that this event is not firing up, since, when you click on a button, it disappears (and input is loosing focus), and javascript is not being fired up. How can I do it, so that this javascript will be executed?

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

jsfeedle にいくつかの変更を加えました。いくつかの ID と 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/