无法使用jQuery获取输入类型值

Question

我正在尝试通过以下方式获取输入类型文本的值：

$( document ).on( 'click', '.reset-to-default-img', function(e) {
    alert($('#image').val());
  });

当我单击按钮时，我收到未定义的警报消息。 我想获得价值。 不知道为什么。 这是我的html：

  <p>
  <!-- Set Default Custom Image  -->
  <label for="widget-gallery-posts-widget[__i__][image]"></label>
  <input name="widget-gallery-posts-widget[__i__][image]" id="widget-gallery-posts-widget-__i__-image" class="widefat" type="text" size="36"  value="" />
  <button class="upload_image_button button button-primary" type="button">Upload Your Custom Default Image</button> <br /> <br />
          <img src="http://localhost/Gallery-Posts-Widget/wp-content/plugins/gallery-posts-widget/views/images/default-thumbnail.jpg"  id="custom-default-img" width="150" height="100" />
      </p>

我想获取此输入的值：

  <input name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" class="widefat" type="text" size="36"  value="<?php echo esc_attr( $image ); ?>" />

有任何想法吗 ？

Answer 1

您应该结合使用最接近的方法和查找方法。

$( document ).on( 'click', '.reset-to-default-img', function(e) {
  var image=$(this).closest('p').find('.widefat').val();
});

Answer 2

从您的php方法中，您将获得id widget-gallery-posts-widget-__i__-image而不是image因此请按以下方式更改代码

$( document ).on( 'click', '.reset-to-default-img', function(e) {
    alert($('#widget-gallery-posts-widget-__i__-image').val());
  });