Keyupはremove（）でのみ機能します

Question

私はjQueryの初心者です。私は奇妙な問題に直面している。私は

$(document).ready(function() { 

    $("#widget_search_affiliate_product").keyup(function() { 
     console.log("hey"); 
    }); 
}); 

が動作していない次のjsを持っている。しかし、私はからkeyup機能上

$("#widget_search_affiliate_product").remove(); 

を追加するときに奇妙なことがある、からkeyup機能が動作を開始します。私はどういうわけか

(function($) { 
 
\t 'use strict'; 
 

 
\t $(document).ready(function() { 
 

 
    \t \t /* Ajax Widget Search */ 
 

 
    \t \t console.log($('[id=widget_search_affiliate_product]').length); \t \t 
 
    \t \t $("#widget_search_affiliate_product").keyup(function() { 
 
    \t \t \t console.log("hey"); 
 
    \t \t }); 
 
    \t }); 
 

 

 

 

 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 

 
<div class="alp_search_product"> 
 
    \t <p> 
 
    \t \t <label for="affiliate_product_single"><strong>Search Affiliate Product:</strong></label><br> 
 
    \t \t 
 
     <input class="widefat" type="text" name="widget_search_affiliate_product" id="widget_search_affiliate_product"> 
 
    \t </p> 
 
     <div class="hidden" id="suggesstion_box"> 
 
    \t \t \t <ul></ul> 
 
    \t \t \t <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> 
 
    \t \t </div> 
 
    \t \t 
 
     <input id="affiliate_product_single" name="affiliate_product_single" type="hidden" value="Search Affiliate Product"> 
 
    \t \t <input type="hidden" id="widget_ajax_nonce" name="" value="6286139014"> 
 

 

 
<div class="alp_select_product"> 
 
    \t \t <h5 class="heading_selected_product">Selected Product</h5> 
 
    \t </div> 
 
</div>

Answer 1

：だから、このコードが出力 "ちょっと" コンソールで私はwidget_search_affiliate_productの検索フィールドに何かを入力し

(function($) { 
 
\t 'use strict'; 
 

 
\t $(document).ready(function() { 
 

 
    \t \t /* Ajax Widget Search */ 
 

 
    \t \t $("#widget_search_affiliate_product").remove(); 
 
    \t \t 
 

 
    \t \t $("#widget_search_affiliate_product").keyup(function() { 
 
    \t \t \t console.log("hey"); 
 
    \t \t }); 
 
    \t }); 
 

 
    })(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

HTMLを行いますwidget_search_affiliate_productという2つのインスタンスがありました。以下は問題を解決しました

(function($) { 
'use strict'; 

$(document).ready(function() { 

    /* Ajax Widget Search */ 

    $("#widget_search_affiliate_product").remove(); 


    $(".alp_widget #widget_search_affiliate_product").keyup(function() { 
     console.log("hey"); 
    }); 
}); 

})(jQuery);