javascript - ajax调用加载的页面中文本框上的Jquery按键事件

Question

我有主页index.php，在此页面上单击按钮我正在使用 ajax 加载 url.php。

在 url.php 我有text box. 我希望当用户在这个 texbox 中输入一些东西时，它下面的按钮显示变得可见。

网址.php

<input type="text" id="text" name="sent" contenteditable="true"  style=" text-align: left; height: 30px; width:512px; " placeholder="Enter URL ..."/></input>
<button id="b1" style="display:none" > Get Sentiment </button>

索引.php

在身体部位：

<script>
    $("#text").keypress( function() {
        document.getElementById("b1").style.display = "block";
        console.log( "Handler for .keypress() called." );
    });
</script>

但是当我转到文本框并单击它时，文本框不会出现。我也试过用 blur和focus代替keypress但没有改变。

要使用 ajax 加载 url.php，我有以下代码：

<input type="button" id="load_url" value="Load url.php" />
$("#load_url").click(function(){
    $.ajax({
        url:"url.php",
        success:function(response) {
            $("#view_port").html(response);
            $("#load_url").hide();
        }
    }); 
});

Answer 1

我猜你忘记keypress在 AJAX 加载后注册事件了。

    $( document ).ready( function(e) {
       $('#button').click(function(e) { // Clicking the button to load the url.php
          $('#somediv').load("url.php", function() { // loading the url.php
             $('#text').keypress(function(e) { // You are registering the keypress event listener after the ajax load
                 $('#b1').show('fast');
             });
          }
       });
   });

Answer 2

将您更改url.php为：

<textarea id="text" name="sent" contenteditable="true" style=" text-align: left; height: 30px; width:512px; " placeholder="Enter URL ..."></textarea>
<input type="button" id="b1" style="display:none" value=" Get Sentiment" />

或者

<input type="text" id="text" name="sent" contenteditable="true" style=" text-align: left; height: 30px; width:512px; " placeholder="Enter URL ..." />
<input type="button" id="b1" style="display:none" value=" Get Sentiment" />

和使用

$(document).ready( function() {
    $("#text").bind("keypress", function( e ) {...});
});

希望它会有所帮助。

Answer 3

尝试这个

<script type="text/javascript">
    $("#text").keypress( function() {
        $("#b1").show();
        console.log( "Handler for .keypress() called." );
    });
</script>