更改事件上的jQuery在弹出窗口中不起作用

Question

我正在使用简单事件，但无法在弹出窗口中进行更改

我甚至尝试在模型中提供script标签，但是即使没有控制台选中的元素，它仍然无法正常工作。请让我知道我在做错什么，我不认为有问题。我也尝试过onchange标签

$(function() {
  // Working checked
  $('body').on('change', '[data-type=Working]', function() {
    var E = $(this).prop('checked') == true ? true : false;
   $('body').on('change','[data-type=Working]',function(){
		var E = $(this).prop('checked');
		 if(E){
		   $('[data-type=EndDateMonth]').hide();
		}else{
		    $('[data-type=EndDateMonth]').show();
		 }
	});
 $('[data-type=Working]:checked').change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <div class="uk-modal" id="Experiences">
    <div class="uk-modal-dialog">
      <div class="uk-modal-header">
        <h3 class="uk-modal-title">Add Experiences</h3>
      </div>
      <div data-type="Fields" class="uk-grid uk-grid-width-large-1-2 uk-grid-width-xlarge-1-4" data-uk-grid-margin>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Company">Company Name</label>
            <input class="md-input" required name="Company" value="" type="text" />
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Designation">Designation</label>
            <input class="md-input" required name="Designation" value="" type="text" />
          </div>
        </div>
        <div class="uk-width-medium-1-1">
          <div class="parsley-row">
            <label for="Config[CategoryID]">Category</label>
            <select class="md-input" data-type="Category" required name="Config[CategoryID]">
              <option value="0">Select...</option>
              <option value="1">Cat 1</option>
              <option value="2">Sub 2</option>
            </select>
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Salary">Current Salary</label>
            <input class="md-input" data-type="Salary" required name="Salary" value="" type="text" />
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Config[CountryID]">Location</label>
            <select class="md-input" data-type="Country" required name="Config[CountryID]">
              <option value="0">Select...</option>
              <option value="1">Pakistan</option>
              <option value="2">Africa</option>
            </select>
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Config[CityID]"></label>
            <select class="md-input" data-type="City" required name="Config[CityID]">
              <option value="0">Select City</option>
            </select>
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Config[TimeStart]">Start Date</label>
            <input class="md-input" data-type="StartDateMonth" required name="Config[TimeStart]" value="" type="text" />
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Config[TimeEnd]">End Date</label>
            <input class="md-input" data-type="EndDateMonth" name="Config[TimeEnd]" value="" type="text" />
          </div>
        </div>
        <div class='uk-width-medium-1-1 uk-row-first'>
          <div class='parsley-row'>
            <label>Currently Working or Not</label>
            <div class='md-input-wrapper'>
              <span class="icheck-inline"> <input data-md-icheck data-type="Working" id="1" name="Currently" value="1" type="checkbox"/> <label for="Currently Working" class="inline-label">Currently Working</label></span>
            </div>
          </div>
        </div>
        <div class="uk-width-medium-1-1">
          <div class="parsley-row">
            <label for="Config[Description]">Description</label>
            <textarea class="md-input" name="Config[Description]"></textarea>
          </div>
        </div>
      </div>
      <div data-type="Result"></div>
      <div class="uk-modal-footer uk-text-right"><button class="md-btn md-btn-success md-btn-wave-light waves-effect waves-button waves-light" name="Submit">Submit</button><button type="button" data-dismiss="modal" class="md-btn md-btn-flat uk-modal-close" name="Close">Close</button></div>
    </div>
  </div>
</form>

我也在页脚区域jquery库中使用脚本标签。

Answer 1

首先请注意，.prop('checked')返回一个布尔值，因此三元表达式是多余的。

第二，布尔值没有val()方法；您似乎将它与jQuery对象混淆了。您可以直接在E条件下直接使用if变量。您还可以为toggle()提供该布尔值，以消除对单独的show()和hide()调用的需要。

最后请注意，E不是一个好的变量名。他们应该描述自己持有的价值。话虽如此，试试这个：

$(function() {
  // Working checked
  $('body').on('change', '[data-type="Working"]', function() {
    var isChecked = $(this).prop('checked');
    $('[data-type="EndDateMonth"]').toggle(!isChecked);
  });
  
  $('[data-type="Working"]:checked').change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <div class="uk-modal" id="Experiences">
    <div class="uk-modal-dialog">
      <div class="uk-modal-header">
        <h3 class="uk-modal-title">Add Experiences</h3>
      </div>
      <div data-type="Fields" class="uk-grid uk-grid-width-large-1-2 uk-grid-width-xlarge-1-4" data-uk-grid-margin>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Company">Company Name</label>
            <input class="md-input" required name="Company" value="" type="text" />
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Designation">Designation</label>
            <input class="md-input" required name="Designation" value="" type="text" />
          </div>
        </div>
        <div class="uk-width-medium-1-1">
          <div class="parsley-row">
            <label for="Config[CategoryID]">Category</label>
            <select class="md-input" data-type="Category" required name="Config[CategoryID]">
              <option value="0">Select...</option>
              <option value="1">Cat 1</option>
              <option value="2">Sub 2</option>
            </select>
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Salary">Current Salary</label>
            <input class="md-input" data-type="Salary" required name="Salary" value="" type="text" />
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Config[CountryID]">Location</label>
            <select class="md-input" data-type="Country" required name="Config[CountryID]">
              <option value="0">Select...</option>
              <option value="1">Pakistan</option>
              <option value="2">Africa</option>
            </select>
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Config[CityID]"></label>
            <select class="md-input" data-type="City" required name="Config[CityID]">
              <option value="0">Select City</option>
            </select>
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Config[TimeStart]">Start Date</label>
            <input class="md-input" data-type="StartDateMonth" required name="Config[TimeStart]" value="" type="text" />
          </div>
        </div>
        <div class="uk-width-medium-1-2">
          <div class="parsley-row">
            <label for="Config[TimeEnd]">End Date</label>
            <input class="md-input" data-type="EndDateMonth" name="Config[TimeEnd]" value="" type="text" />
          </div>
        </div>
        <div class='uk-width-medium-1-1 uk-row-first'>
          <div class='parsley-row'>
            <label>Currently Working or Not</label>
            <div class='md-input-wrapper'>
              <span class="icheck-inline"> <input data-md-icheck data-type="Working" id="1" name="Currently" value="1" type="checkbox"/> <label for="Currently Working" class="inline-label">Currently Working</label></span>
            </div>
          </div>
        </div>
        <div class="uk-width-medium-1-1">
          <div class="parsley-row">
            <label for="Config[Description]">Description</label>
            <textarea class="md-input" name="Config[Description]"></textarea>
          </div>
        </div>
      </div>
      <div data-type="Result"></div>
      <div class="uk-modal-footer uk-text-right"><button class="md-btn md-btn-success md-btn-wave-light waves-effect waves-button waves-light" name="Submit">Submit</button><button type="button" data-dismiss="modal" class="md-btn md-btn-flat uk-modal-close" name="Close">Close</button></div>
    </div>
  </div>
</form>