Isotope and Instagram Jquery plugins - 在 jQuery click 函数中动态更新文本输入 val()答案

【问题标题】：Isotope and Instagram Jquery plugins - Updating a text input val( ) dynamically inside a jQuery click functionIsotope and Instagram Jquery plugins - 在 jQuery click 函数中动态更新文本输入 val()
【发布时间】：2012-05-23 05:25:21
【问题描述】：

我正在编写一些代码，它使用Instagram 查询插件将照片加载到页面中，并使用 Jquery Isotope 进行布局。我让它工作，除了我希望能够在文本输入中输入一个哈希名称，该输入将加载那些标记有该哈希名称的图像。我有一个加载图像的按钮。第一次输入文本输入时效果很好，但是当文本输入更改时，我无法在按钮单击功能中更新哈希。我想知道我是否需要为此使用委托？任何帮助，将不胜感激我是一个 jquery 编码新手，所以我意识到我的代码需要一些微调。

$(function(){

var selectedHash = $( "input:text[name=hash]" ).val();    
var insta_container = $(".instagram"), insta_next_url;

 insta_container.instagram({
    hash: selectedHash,
    clientId : '4cc3fc9df774483cb575b405f3c1cc21',
    show : 10,
    locationId: '',
    onComplete : function (photos, data) {
  var insta_next_url = data.pagination.next_url;
  $(function(){ 
  $('div.instagram').imagesLoaded( function(){
    $(this).isotope({
      itemSelector : '.item',
      masonry: {
     columnWidth: 170
   }
    });
   });
      });      
    }
  });

$('button.add').bind('click', function(){
  var button = $(this); 
  var selectedHash = $( "input:text[name=hash]" ).val();    
   insta_container.instagram({
       next_url : insta_next_url,
       hash: selectedHash,
       clientId : '4cc3fc9df774483cb575b405f3c1cc21',
        show : 10,
        onComplete : function(photos, data) {
      insta_next_url = data.pagination.next_url;

        var $newItems = $(insta_next_url);
    $('div.instagram').prepend($newItems).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
    }
  });  
 });



});

【问题讨论】：

在click 和onComplete 函数中添加一些console.log( /* variable here */ ) 行。 selectedHash 有变化吗？ Instagram ajax 正在运行吗？它是否返回预期的数据？
那么，您是在尝试将文本输入的 val() 在按下按钮后作为按钮的文本放入？
另外，在你的button.add点击事件中你有button.text(text)，我没有看到text在任何地方定义。
对不起，应该删除的。单击时按钮显示“正在加载”，我的意思是不显示无关代码。我正在尝试将文本输入 val() 放入 hash: selectedHash,
我建议您使用上面 Timothy 的示例检查 selectedHash 的内容。我感觉问题不在于selectedHash 没有更新，而是与同位素代码有关。

标签： jquery click jquery-isotope instagram

【解决方案1】：

好吧，这里有一个问题。

var selectedHash = $( "input:text[name=hash]" ).val();

...应该是...

var selectedHash = $( "input[name='hash']" ).val();

【讨论】：

哇。 $( "input:text[name=hash]" ) 确实有效。刮那个。今天学到了新东西。 :)