jQuery无法从函数内动态创建的字段获取输入值

Question

'This is a little strange, and different than what I can find in the forums, but I encounter this problem again and again when I work with jQuery.

I have code that calls ajax and creates (on success) an input like:

Start Date: <input type="text" id="gr_start_dt" size=10>
<button onclick="reassign_u();">Execute</button>

In the main body of the HTML, I have a function like this:

<script type="text/javascript" language="javascript">
function reassign_u()
{
   alert($("#gr_start_dt").val());
}
</script>

This will alert to "undefined".

If I change the button in the ajax generated section to:

<button onclick="alert($('#gr_start_dt').val());">Execute</button>

it will alert with the value of the box.

I can get the value from outside of the function, but not within the function.

Am I missing something here? Is there some scope I'm not aware of with jquery and dynamically generated pages with ajax?

I'm using jquery 2.1.3 and 2.1.4, Firefox 39.

Answer 1

I think that is because when the javascript function was cached into the browser the element $("#gr_start_dt") is not yet defined. And calling the function will just call the function that was cached having the undefined element inside the alert function.

So why not do it like this:

below is the html

Start Date: <input type="text" id="gr_start_dt" size=10>
<button onclick="reassign_u($('#gr_start_dt'));">Execute</button>

below is the javascript:

<script type="text/javascript" language="javascript">
function reassign_u(el)
{
   alert($(el).val());
}
</script>

Answer 2

Removing the the line: $("#invoice_detail_content").html(''); from the following function should resolve the issue. This line removes the the textbox in question.

function reassign_user2() { 
    $("#action_menu_container").hide();
    $("#invoice_detail_content").html(''); //<== REMOVE THIS
    $("#invoice_detail").show();
    $("#loading").show();

    console.log($("#group_start_dt"));

    alert($("#group_start_dt").val());


    $.ajax({
        url: "fetch.php",
        cache: false,
        method: "POST",
        data: {
            action: 'reassign_group',
            parameters: JSON.stringify(parameters)                        
        }                              
    })
    .done(function(result) {                                       
        $("#loading").hide();
        result = result.trim();
        if(result)
        {
            $("#invoice_detail_content").html(result);
        }
        else
        {
            $("#invoice_detail").hide();
            show_invoices($("#invoice_status_select").val());
        }
    })
    .fail(function( jqXHR, textStatus ) {
        $("#loading").hide();
        alert( "Request failed: " + textStatus );                                                 
    });
}

Answer 3

So I'm taking a bit of a stab at this so hopefully I don't get down voted :(, though I believe I have the answer to this question.

When the DOM tree is created on the first page load all of the javascript events are bound to the all their respective elements, thus your .val() isn't attaching to any dynamically generated elements, but, one thing I have noticed, is that if you dynamically add some javascript with that dynamically created element it will run its binding process right then and there and still work, which is what you have done by putting the alert($(element).val()) directly on the dynamically generated element.

Hopefully this helps you, if not somebody out there. I realized the answer is a bit late.

Answer 4

I'm pretty sure creating things with JQuery/AJAX still causes it to enter the DOM, which means it can be gotten with $('selector') . So it should be just as straightforward usual.

I used:

<script>
    function on_clicked() {
       alert($("#text_input").val());
    }
</script>

<input type="text" id="text_input" size=10>
<button onclick="on_clicked();">Execute</button>

Working JSFiddle here .

I found that you have to declare the function before setting it to the onclick attribute. Which makes sense. Otherwise I don't see any other big problems.

Update

I am now making the <form> element "asynchronously" (I used a timeout to simulate AJAX. As long as the callback is declared before and in scope, it works fine.

JSFiddle

I've replicated what you are saying as well as I can, and it still works.

Answer 5

It works for me. May be you should put the js function in the same file from which you make the AJAX call.

here's the code

index.php

<head>
            function doSomeTheing() {
                $.ajax({
                    url: 'test01.php',
                    success: function (mydata) {
                        $('#container').html(mydata);
                    }
                });
            }

            function reassign_u()
            {
                alert($("#gr_start_dt").val());
            }
</head>
<body>
        <input type="button" id="abc" onclick="doSomeTheing()" value="test">
        <div id="container">

        </div>
</body>

test.php contains

<?php

echo 'Start Date: <input type="text" id="gr_start_dt" size=10>
<button onclick="reassign_u();">Execute</button>';