入力の自動クリックイベントのJavaScriptクリックイベント

Question

アイテムリストにクリックイベントをバインドできません。ボックスは消えていきます。 item-list> divをクリックすると、divのclickイベントをバインドできないのですが、テキストをフェッチして入力プレースホルダに追加する必要がありますか？

(function() { 
 
    $(".input-msg").focus(function() { 
 
    $(".item-list").css('display', 'block'); 
 
    $(".item-list div").click(function() { 
 
     var inputValue = $('.input-msg'); 
 
     var data = $(this).text(); 
 
     inputValue.val(data); 
 
    }); 
 
    }).blur(function() { 
 
    $(".item-list").css('display', 'none'); 
 
    }); 
 
})();

.input-wrapper { 
 
    width: 300px; 
 
} 
 

 
.item-list { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Please add your HTML so we can run it --> 
 
<div class="input-wrapper"> 
 
    <input type="text" class="input-msg" placeholder="click me"> 
 
    <!-- input msg --> 
 
    <div class="item-list"> 
 
    <div>This is item one</div> 
 
    <div>This is item one</div> 
 
    <div>This is item one</div> 
 
    <div>This is item one</div> 
 
    </div> 
 
</div>

Answer 1

このコードを使用すると、クリックイベントを呼び出している、クリックイベントをバインドされていません。

$(".item-list div").click() 
{ 
    var inputValue = $('.input-msg'); 
    var data = $(this).text(); 
    inputValue.val(data); 
} 

マウスダウンする

$(".item-list div").off('click').click(function() { 
    var inputValue = $('.input-msg'); 
    var data = $(this).text(); 
    inputValue.val(data); 
}); 

---

変更クリックする必要があり、あなたはblurイベント火災をクリックして、クリックアクションが完了する前に非表示にするためのリストが発生したときので、それが動作します。

(function() { 
 
    $(".input-msg").focus(function() { 
 
    $(".item-list").css('display', 'block'); 
 
    $(".item-list div") 
 
     .off('mousedown') 
 
     .on('mousedown', function() { 
 
     var inputValue = $('.input-msg'); 
 
     var data = $(this).text(); 
 
     inputValue.val(data); 
 
     }); 
 
    }).blur(function() { 
 
    $(".item-list").css('display', 'none'); 
 
    }); 
 
})();

.input-wrapper { 
 
    width: 300px; 
 
} 
 

 
.item-list { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Please add your HTML so we can run it --> 
 
<div class="input-wrapper"> 
 
    <input type="text" class="input-msg" placeholder="click me"> 
 
    <!-- input msg --> 
 
    <div class="item-list"> 
 
    <div>This is item one</div> 
 
    <div>This is item two</div> 
 
    <div>This is item three</div> 
 
    <div>This is item four</div> 
 
    </div> 
 
</div>

Answer 2

私はあなたの.click()構文が間違っていると信じて、それは私があなたのコード

(function() { 
    $(".input-msg").focus(function() { 
    $(".item-list").css('display', 'block'); 
    $(".item-list div").click(function(){ 
     var inputValue = $('.input-msg'); 
     var data = $(this).text(); 
     inputValue.val(data); 
    }) 
    }).blur(function() { 
    $(".item-list").css('display', 'none'); 
    }); 
})();