Jquery応答オブジェクトにHTMLを追加する

Question

何か理由でajax jQueryにhtmlを追加するのに問題があります。ここで

は、私はにHTMLを追加しようとしているAjaxのGET要求から返されるHTMLの一部です：

<div id="EndDateRange"> 
    <input class="text-box single-line" data-val="true" data-val- 
    date="The field Enter End Date: must be a date." data-val- 
    required="Please enter an End Date." id="EndDate" name="EndDate" 
    type="datetime" value="6/3/2017 1:04:15 PM" /> 
    <span class="field-validation-valid" data-valmsg-for="EndDate" data- 
    valmsg-replace="true"></span> 
    <input id="EndDate" name="EndDate" type="hidden" value="6/3/2017 
    1:04:15 PM" /> 
</div> 

、ここでjQueryのです：いくつかのために

$(response).find('#EndDate[type=hidden]').append("<div><span>Add</span</div>"); 

これは動作していない理由です。

---

まだ動作しません。ここで詳細は以下のとおりです。ここで

要求 "GET" である：

<form action="SearchDate" id="Form" method="post"> <div 
class="form-group"> 
    <fieldset> 
     <div class="row" id="DateRangeValues"> 
      <div class="col-sm-6 dateWidth"> 
       <div id="StartDateLabel"> 
        <label class="bold control-label" for="StartDate">Enter Start Date: </label> 
       </div> 
       <div id="StartDateRange"> 
        <input class="text-box single-line" data-val="true" data-val-date="The field Enter Start Date: must be a date." id="StartDate" name="StartDate" type="datetime" value="" /> 
        <span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span> 
        <input id="StartDate" name="StartDate" type="hidden" value="" /> 
       </div> 
      </div> 
      <div class="col-sm-6 dateWidth"> 
       <div id="EndDateLabel"> 
        <label class="bold control-label" for="EndDate">Enter End Date: </label> 
       </div> 
       <div id="EndDateRange"> 
        <input class="text-box single-line" data-val="true" data-val-date="The field Enter End Date: must be a date." data-val-required="Please enter an End Date." id="EndDate" name="EndDate" type="datetime" value="6/3/2017 11:51:48 AM" /> 
        <span class="field-validation-valid" data-valmsg-for="EndDate" data-valmsg-replace="true"></span> 
        <input id="EndDate" name="EndDate" type="hidden" value="6/3/2017 11:51:48 AM" /> 
       </div> 
      </div> 
     </div> 

等：ここ

function showDates() { 
var DatesViewRequest = $.ajax({ 
    type: 'GET', 
    url: searchDatesUrl, 
    cache: false, 
    async: isAsync, 
    contentType: 'text/html', 
    xhrFields: { 
     withCredentials: true 
    }, 
    error: (function (error, variable) { 
     alert('There was an error with the request'); 
    }) 
}); 
$.when(DatesViewRequest).done(function (response) { 
    var picklist = $('<select>', { 
     name: 'ValueNamesWebIds', 
     id: 'value_name', 
     multiple: 'multiple' 
    }) 
    .attr('size', '15') 
    .addClass('form-control') 
    .on('change', function() { 
     SetHiddenValues('value_name', 'ValueNames', 'true'); 
     EnableDisableButtons(); 
    }) 

    //var element = $(response).find('#EndDate[type=hidden]'); 

    $(response).find('#EndDate[type=hidden]').after('<div>Add</div>'); 

    $("#DisplayDateInputFields").append(response); 

    $("#VerificationAndValidation").hide(); 

    InitializeDateFields(); 
}); 

}

をHTMLの部分が "GET" 要求から返され

Answer 1

要素の後に追加する必要があります。

$(response).find('#EndDate').after("<div><span>Add</span</div>"); 

と[type=hidden]を使用して任意であり、そしてあなたはEndDateのidを持つ単一要素のみを有することができます。