调用IIFE内部的函数

I am successfully being able to call a function (function1) which exists outside of an IIFE.

我成功地能够调用存在于IIFE之外的函数（function1）。

My question is how can I invoke function2 ? Right now it returns function2 is undefined. I am thus sure that this is not the right way to call a function from an IIFE. So I would love to know the correct way and appreciate a brief explanation.

我的问题是如何调用function2？现在它返回function2是未定义的。因此，我确信这不是从IIFE调用函数的正确方法。所以我很想知道正确的方法，并欣赏一个简短的解释。

function function1() {
    alert('1');
}

(function($){ 
  function function2(){
      alert('2');
  }
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onkeypress="function1();"/>
<input type="text" onkeypress="function2();"/>

4 个解决方案

#1

The onkeypress attribute runs in the global context, so it can't see the function inside your IIFE.

onkeypress属性在全局上下文中运行，因此无法在IIFE中看到该函数。

Using attributes for event listeners like this is not a recommended practice.

不建议使用像这样的事件监听器的属性。

Instead of doing it that way, it's better to attach the event listener from code inside your IIFE, perhaps like this:

而不是这样做，最好从IIFE中的代码附加事件监听器，可能是这样的：

(function($){

  function function2(){
      alert('2');
  }

  $('#test2').on( 'keypress', function2 );

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test2" />

I added an id attribute to the input element, but you could also use a class or other ways to identify it when you add the event listener.

我在input元素中添加了一个id属性，但是在添加事件监听器时，您还可以使用类或其他方法来识别它。

#2

Your function is out of scope in the code that you have provided. You could either move function two out of the IIFE or register your event on the inputs inside the IIFE.

您的功能超出了您提供的代码范围。您可以将功能二移出IIFE，也可以在IIFE内的输入上注册事件。

function one() {
  alert(1)
}


(function($) {
  function two() {
    alert(2)
  }
  $('.one').keypress(one)
  $('.two').keypress(two)
})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="one" type="text" />
<input class="two" type="text" />

#3

Use jQuery, of course!

当然，使用jQuery！

function function1() {
  console.log('1');
}

(function($){ 
  $('input').eq(1).keypress(function function2() {
    console.log('2');
  })
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onkeypress="function1();"/>
<input type="text"/>

Yes I'm aware I completely side-stepped the issue.

是的，我知道我完全支持这个问题。

The point is, you should be doing what is considered good practice, and not trying to force something which is considered bad practice into working.

关键是，你应该做一些被认为是好的做法，而不是试图强迫一些被认为是不良做法的东西。

#4

You can use it if you make function2 public

如果你将function2公开，你可以使用它

function function1() {
    alert('1');
}

var myFuncs = (function($){ 
  function function2(){
      alert('2');
  }
  return {
      fun2:function2

}
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onkeypress="function1();"/>
<input type="text" onkeypress="myFuncs.fun2();"/>

#1