追加后，按鈕不起作用-jQuery

Question

附加元素占據相同的Y位置后，按鈕將不起作用，為什么會發生這種情況？ 我聽取了其他帖子的建議，並以某種方式設置了onclick函數，但仍然遇到問題

JS：

 var welldataArray = [];
 var productiondataArray = [];
 var radioSearchPartB = 0;
 var productionjsonarray = [];



$(document).ready(function() {

    $(document).on('click', '.clearButton', function (){
    $('#result1').empty();
    $('#block1').val("");
    $('#block2').val("");
    $('#block3').val("");
    $('#block4').val("");
    $('#block5').val("");
});

$(document).on('click', '.searchButton', function(){
    //validate
    if(radioSearchPartB == 1){
        var block1 = $("#block1").val().toUpperCase();
        var firstcharBlock1 = block1.substring(0,1);
        var secondcharBlock1 = block1.substring(1,3);
        var secondParsed = parseInt(secondcharBlock1);
        var block2 = $("#block2").val();
        var block3 = $("#block3").val();
        var block4 = $("#block4").val().toUpperCase();
        var firstcharBlock4 = block4.substring(0,1);
        var secondcharBlock4 = block4.substring(1,3);
        var msg = "";

    if(firstcharBlock1!= 'A' && firstcharBlock1!= 'B' && firstcharBlock1!= 'C' && firstcharBlock1!= 'D'){
        msg+="First text box Invalid Format: First character Range A-D\n";
    } 

    if(secondParsed < 1 || secondParsed > 16 || isNaN(secondParsed) ||  !($.isNumeric(secondcharBlock1))){
        msg+="First text box Invalid Format: Second Character Range 1-16\n";
    }

    if(parseInt(block2) < 1 || parseInt(block2) > 126 || block2.length == 0 || isNaN(parseInt(block2)) ){
        msg+="Second text box Invalid Format: Must be a number 1-126\n"
    }

    if(isNaN(parseInt(block3)) || parseInt(block3) < 1 || parseInt(block3) > 24 || block3.length == 0){
        msg+="Third text box Invalid Format: Must be a number 1-24\n";
    }

    if(firstcharBlock4 != 'W' || parseInt(secondcharBlock4) < 4 || parseInt(secondcharBlock4) > 6){
        msg+= "Fourth text box Invalid Format: W and then a number 4-6\n";
    } 

    if(msg.length > 0){
        alert(msg);
        return;
    }

    //then
    $('#result1').empty();

    var i = 0; 
    productionjsonarray = [];
    while(i < productiondataArray.length){
        var jsonObject = {
            "location": productiondataArray[i++].trim(),
            "date": productiondataArray[i++].trim(),
            "oilproduction": productiondataArray[i++].trim(),
            "waterproduction": productiondataArray[i++].trim(),
            "gasproduction": productiondataArray[i++].trim()
        }
        productionjsonarray.push(jsonObject);
    }


    var assemble = block1 + "-" + block2 + "-" + block3 + "-" + block4;
    var check = false;
    for(var i = 0; i < welldataArray.length; i++){
        if(welldataArray[i].trim() == assemble){
            for(var j = 0; j < productionjsonarray.length; j++){
                if(productionjsonarray[j].location.trim() == welldataArray[i].trim()){
                   $('#result1').append(productionjsonarray[j].location.trim() + " " 
                    + productionjsonarray[j].date.trim() + " " + productionjsonarray[j].oilproduction.trim() 
                    + " " + productionjsonarray[j].waterproduction.trim() + " " + productionjsonarray[j].gasproduction.trim() + "<br>");
                   check = true;
                }
            }
        }
    }

    if(check == false){
        alert("No match to search");
        return;
    }

} else {
    //validate
    var block5 = $("#block5").val().toUpperCase();
    var firstcharBlock5 = block5.substring(0,1);
    var secondcharBlock5 = block5.substring(1,3);
    var secondParsed5 = parseInt(secondcharBlock5);
    var msg = "";

    if(firstcharBlock5!= 'A' && firstcharBlock5!= 'B' && firstcharBlock5!= 'C' && firstcharBlock5!= 'D'){
        msg+="text box Invalid Format: First character Range A-D\n";
    } 

    if(secondParsed5 < 1 || secondParsed5 > 16  || isNaN(secondParsed5) ||  !($.isNumeric(secondcharBlock5))){
        msg+="text box Invalid Format: Second Character Range 1-16\n";
    }

    if(msg.length > 0){
        alert(msg);
        return;
    }

    //then
    var check = false;
    $('#result1').empty();
    for(var i = 0; i < welldataArray.length; i++){
        if(welldataArray[i].trim().indexOf(block5.trim()) >= 0){
            $('#result1').append(welldataArray[i] + " " + welldataArray[i+1] + " " + welldataArray[i+2] + " " + welldataArray[i+3] + " " + welldataArray[i+4] + " " + welldataArray[i+5] + "<br>");
            check = true;
        }
    }

    if(check == false){
        alert("No match to search");
        return;
    }

    var i = 0; 
    productionjsonarray = [];
    while(i < productiondataArray.length){
        var jsonObject = {
            "location": productiondataArray[i++].trim(),
            "date": productiondataArray[i++].trim(),
            "oilproduction": productiondataArray[i++].trim(),
            "waterproduction": productiondataArray[i++].trim(),
            "gasproduction": productiondataArray[i++].trim()
        }
        productionjsonarray.push(jsonObject);
    }
}
 });

    $.ajax({
        type: "GET",
        url: "welldata.xml",
        dataType: "xml",
        success: function(xml){
           $(xml).find('welldata').each(function(){ //code provided by stack overflow: http://stackoverflow.com/questions/6542187/xml-to-javascript-array-with-jquery

                var location;
                var welldepth;
                var perfdepth;
                var perfzone;
                var stroke;
                var strokepermin; 

                location = $('location', this).text();
                welldepth = $('welldepth', this).text();
                perfdepth = $('perfdepth', this).text();
                perfzone = $('perfzone', this).text();
                stroke = $('stroke', this).text();
                strokepermin = $('strokepermin', this).text();

                welldataArray.push(location);
                welldataArray.push(welldepth);
                welldataArray.push(perfdepth);
                welldataArray.push(perfzone);
                welldataArray.push(stroke);
                welldataArray.push(strokepermin);

             });
        }
    });

      $.ajax({
                    type: "GET",
                    url: "productiondata.xml",
                    dataType: "xml",
                    success: function(xml){
                        $(xml).find('productiondata').each(function(){
                            var location;
                            var date;
                            var oilproduction;
                            var waterproduction;
                            var gasproduction;


                            location = $('location', this).text();
                            date = $('date', this).text();
                            oilproduction = $('oilproduction', this).text();
                            waterproduction = $('waterproduction', this).text();
                            gasproduction = $('gasproduction', this).text();

                            productiondataArray.push(location);
                            productiondataArray.push(date);
                            productiondataArray.push(oilproduction);
                            productiondataArray.push(waterproduction);
                            productiondataArray.push(gasproduction);

                        });

                        $( "#searchButton" ).click(function() {
                            radioSearchPartB = $('input[name=searchChoice]:checked').val()
                        });
                    }       
    });
  });


function loadPartB(){
        document.getElementById("block1").maxLength = "3";
        document.getElementById("block2").maxLength = "3";
        document.getElementById("block3").maxLength = "2";
        document.getElementById("block4").maxLength = "2";
        document.getElementById("block5").maxLength = "3";
        radioSearchPartB = $('input[name=searchChoice]:checked').val();
        $('#result1').html('');
        $('#result1').empty();
        if(radioSearchPartB == 2){
            $("#1stblocks").hide();
            $("#1stex").hide();
            $("#2ndblocks").show();
            $("#2ndex").show();
        } else {
            $("#1stblocks").show();
            $("#1stex").show();
            $("#2ndblocks").hide();
            $("#2ndex").hide();
        }
    }

HTML：

 <!DOCTYPE html>
<html class="colorful">

    <head>
        <meta charset="utf-8">
        <title>Final Project</title>    
        <link rel="stylesheet" type="text/css" href="css/final.css">
        <script src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="final.js"></script>
    </head>

    <body onload="loadPartB()">
        Cameron Steinburg 734972
        <br>
        <h1>This is Part B</h1>
        <br>
        <h2>Oil Well Database</h2>
        <div id="result1"></div>
        <br>
        <input type="radio" name="searchChoice" value="1" checked onchange="loadPartB()"> Search by specific location &nbsp; &nbsp; &nbsp;
        <input type="radio" name="searchChoice" value="2" onchange="loadPartB()"> Search by section


        <br>
        <br>

        <table id="1stblocks">
            <tr>
                    <td><input type="text" id="block1">-</td>
                    <td><input type="text" id="block2">-</td>
                    <td><input type="text" id="block3">-</td>
                    <td><input type="text" id="block4"></td>
                    <td></td>
            </tr>
        </table>


        <div id="1stex">
             ex. B15-98-17-W5
        </div>

        <br>    
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>            

        <table id="2ndblocks"> 
            <tr>
                <td><input type="text" id="block5"></td>            
            </tr>
        </table>

        <div id="2ndex">
        ex. B15
        </div>

        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

        <div>
            <input type="submit" value="Search" class="searchButton">
            <input type="submit" value="Clear" class="clearButton">
        </div>
        <br>
        <br>
        <h3><a href="PartA.html">Main Page</a> &nbsp; <a href="PartC.html">Part C</a> &nbsp; <a href="PartD.html">Part D</a></h3>
    </body>

</html>

Answer 1

好吧，如果您從正文中刪除onload="loadPartB()"並調用loadPartB(); ，您的按鈕將起作用loadPartB(); 在您的document.ready（）中

$(document).ready(function() {
 loadPartB();
 $(document).on('click', '.clearButton', function (){
 $('#result1').empty();
 $('#block1').val("");
 $('#block2').val("");
 $('#block3').val("");
 $('#block4').val("");
 $('#block5').val("");
});

Answer 2

您可以使用delegate()為：

$(document).delegate('click', '.clearButton', function (){
     // your code
});

文件： http : //api.jquery.com/delegate/

此事件始終設置為新元素