Javascript 按钮不'；append-jquery之后无法工作

附加元素占据相同的Y位置后，按钮将不工作，为什么会发生这种情况？我采纳了其他帖子的建议，以某种方式实现了onclick函数，但我仍然有一些问题

js:

var-welldataArray=[]；
var productiondataArray=[]；
var radioSearchPartB=0；
var productionjsonarray=[]；
$（文档）.ready（函数（）{
$（文档）.on（'单击'，'.clearButton'，函数（）{
$（'#result1'）.empty（）；
$（'#block1'）.val（“”）；
$（'#block2'）.val（“”）；
$（'#block3'）.val（“”）；
$（'#block4'）.val（“”）；
$（'#block5'）.val（“”）；
});
$（文档）.on（'单击'，'.searchButton'，函数（）{
//证实
如果（radioSearchPartB==1）{
var block1=$（“#block1”）.val（）.toUpperCase（）；
var firstcharBlock1=block1.子串（0,1）；
var secondcharBlock1=block1.子串（1,3）；
var secondParsed=parseInt（secondcharBlock1）；
var block2=$（“#block2”）.val（）；
var block3=$（“#block3”）.val（）；
var block4=$（“#block4”）.val（）.toUpperCase（）；
var firstcharBlock4=block4.子串（0,1）；
var secondcharBlock4=block4.子串（1,3）；
var msg=“”；
if（firstcharBlock1！=“A”&&firstcharBlock1！=“B”&&firstcharBlock1！=“C”&&firstcharBlock1！=“D”）{
msg+=“第一个文本框格式无效：第一个字符范围A-D\n”；
} 
if（secondParsed<1 | | secondParsed>16 | | isNaN（secondParsed）| |！（$.isNumeric（secondcharBlock1）））{
msg+=“第一个文本框格式无效：第二个字符范围1-16\n”；
}
if（parseInt（block2）<1 | | parseInt（block2）>126 | | block2.length==0 | | isNaN（parseInt（block2）））{
msg+=“第二个文本框格式无效：必须是数字1-126\n”
}
如果（isNaN（parseInt（block3））| | parseInt（block3）<1 | | parseInt（block3）>24 | | block3.length==0）{
msg+=“第三个文本框格式无效：必须是数字1-24\n”；
}
if（firstcharBlock4！=“W”| parseInt（secondcharBlock4）<4 | parseInt（secondcharBlock4）>6）{
msg+=“第四个文本框格式无效：W，然后是数字4-6\n”；
} 
如果（msg.length>0）{
警报（msg）；
返回；
}
//然后
$（'#result1'）.empty（）；
var i=0；
productionjsonarray=[]；
while（i”；
检查=正确；
}
}
}
}
如果（检查==false）{
警报（“与搜索不匹配”）；
返回；
}
}否则{
//证实
var block5=$（“#block5”）.val（）.toUpperCase（）；
var firstcharBlock5=block5.子串（0,1）；
var secondcharBlock5=block5.子串（1,3）；
var secondParsed5=parseInt（secondcharBlock5）；
var msg=“”；
if（firstcharBlock5！=“A”&&firstcharBlock5！=“B”&&firstcharBlock5！=“C”&&firstcharBlock5！=“D”）{
msg+=“文本框格式无效：第一个字符范围A-D\n”；
} 
如果（secondParsed5<1 | | secondParsed5>16 | | isNaN（secondParsed5）| |！（$.isNumeric（secondcharBlock5）））{
msg+=“文本框格式无效：第二个字符范围1-16\n”；
}
如果（msg.length>0）{
警报（msg）；
返回；
}
//然后
var检查=假；
$（'#result1'）.empty（）；
对于（var i=0；i=0）{
$（'#result1'）。追加（welldataArray[i]+“”+welldataArray[i+1]+“”+welldataArray[i+2]+“”+welldataArray[i+3]+“”+welldataArray[i+4]+“”+welldataArray[i+5]+“
”；
检查=正确；
}
}
如果（检查==false）{
警报（“与搜索不匹配”）；
返回；
}
var i=0；
productionjsonarray=[]；
while（i 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();
        }
    }

 <!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>

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

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